title: How to create dynamic add input field
body: <p>I am trying to create a dynamic add input field when user type insde the input the add button will available to click on. And after click on add it will appear another input field.</p>
  <p>Here is how the it look like:</p>
  <p><a href="https://i.stack.imgur.com/Bg1AQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bg1AQ.png" alt="enter image description here" /></a></p>
  <p>and here is what I have implemented:</p>
  <pre><code>  const [inputs, setInputs] = useState(
      teamData.rules.map((value) =&gt; ({
        value,
        guid: uuidV4(),
      }))
    );
  
    const addInputs = (event) =&gt; {
      event.preventDefault();
      setInputs((inputs) =&gt; [
        ...inputs,
        {
          name: `rule_${inputs.length + 1}`,
          guid: uuidV4(),
        },
      ]);
    };
    const removeInputs = (index) =&gt; {
      const newList = inputs.filter((item, i) =&gt; index !== i);
      setInputs(newList);
    };
    const clearInput = (dataName) =&gt; {
      setUpdateTeamData((prevState) =&gt; {
        delete prevState[dataName];
        return {
          ...prevState,
        };
      });
    };
  
  &lt;div&gt;
    {inputs?.map((data, idx) =&gt; {
      return (
        &lt;div className=&quot;agreement-form-grid&quot; key={data.guid}&gt;
          &lt;button
            type=&quot;button&quot;
            className=&quot;agreement-remove-button&quot;
            onClick={() =&gt; {
              removeInputs(idx);
              clearInput(`rule_${idx}`);
            }}
          &gt;
            &lt;Remove /&gt;
          &lt;/button&gt;
          &lt;input
            name={`rule_${idx}`}
            onChange={handleChange}
            placeholder={`Rule ${idx + 1}`}
            defaultValue={teamData.rules[idx]}
          /&gt;
        &lt;/div&gt;
      );
    })}
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/QHVm8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QHVm8.png" alt="enter image description here" /></a></p>
  <p>How can I achieve the feature like the first picture?</p>