title: React dynamic form input ref typeError
body: <p>I have a React form with dynamic input fields that a user can add and remove input fields. I validate when i submit the form. If input is empty, input gets focused with useRef hook. The problem is that if i have two inputs empty, so i add a second input and remove it after, i am getting typeError &quot;Cannot read properties of null (reading 'focus')&quot;. I tried with dynamic useRef input too but i can't fix it.</p>
  <p><a href="https://i.stack.imgur.com/zKea8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zKea8.png" alt="enter image description here" /></a></p>
  <p><a href="https://codesandbox.io/s/react-dynamic-form-xez6d?file=/src/App.js" rel="nofollow noreferrer">CodeSandBox</a></p>
  <p><strong>App.js</strong></p>
  <pre><code>import React, { useState, useRef } from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  
  import &quot;./styles.css&quot;;
  
  function App() {
    const [fields, setFields] = useState([&quot;&quot;]);
  
    const fieldRef = useRef();
  
    const fieldsIsValid =
      fields.length &gt;= 1 &amp;&amp; fields.every((field) =&gt; field.trim() !== &quot;&quot;);
  
    function handleChange(i, event) {
      const values = [...fields];
      values[i] = event.target.value;
      setFields(values);
    }
  
    function handleAdd() {
      const values = [...fields];
      values.push(&quot;&quot;);
      setFields(values);
    }
  
    function handleRemove(i) {
      const values = [...fields];
      values.splice(i, 1);
      setFields(values);
    }
  
    function submitHandler(event) {
      event.preventDefault();
  
      if (!fieldsIsValid) {
        if (fields.length &gt;= 1) {
          fieldRef.current.focus();
          return;
        }
        return;
      }
      console.log(fields);
    }
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;form onSubmit={submitHandler}&gt;
          &lt;button type=&quot;button&quot; onClick={() =&gt; handleAdd()}&gt;
            Add Input
          &lt;/button&gt;
          {!fieldsIsValid &amp;&amp; &lt;p className=&quot;error&quot;&gt;Input is required&lt;/p&gt;}
          {fields.map((field, idx) =&gt; {
            return (
              &lt;div key={`${&quot;input&quot;}-${idx}`}&gt;
                &lt;input
                  type=&quot;text&quot;
                  placeholder=&quot;Enter text&quot;
                  value={field || &quot;&quot;}
                  ref={fieldRef}
                  onChange={(e) =&gt; handleChange(idx, e)}
                /&gt;
                &lt;button type=&quot;button&quot; onClick={() =&gt; handleRemove(idx)}&gt;
                  X
                &lt;/button&gt;
              &lt;/div&gt;
            );
          })}
          &lt;button className=&quot;margin-top&quot; type=&quot;submit&quot;&gt;
            Submit
          &lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>