title: changing singleinput code to dynamically add more input fields with same features in react
body: <p>There was an input field set up, and it has many processes attatched to it.</p>
  <p>these input fields are for &quot;add member&quot;</p>
  <p>How can I make this code work so that I can add aditional fields into the react project?</p>
  <p>Here is the code which had my problem in it.</p>
  <p>My difficulty is in understanding the map function, in creating a different set of values for seperate input fields dynamically added (so they do not just change the same inpuit field) and in adapting the code to what worked when there was 1 input field.
  so the</p>
  <p>map( item, index)</p>
  <p>the input fields reacting to different values.</p>
  <p>the old code that worked with</p>
  <pre><code>
       if (inviteSent &amp;&amp; fields.email.value) {
            setInviteSent(false);
            console.log(inviteSent);
  
  </code></pre>
  <p>but does not work with</p>
  <pre><code>
       if (inviteSent &amp;&amp; fields[holder.length - 1].email.value) {
            setInviteSent(false);
            console.log(inviteSent);
  </code></pre>
  <hr />
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  
  export default function App() {
    let CloneFields = {
      email: &quot;&quot;,
      name: &quot;&quot;,
    };
  
    let holder = [CloneFields];
  
    const [fields, setFields] = useState(holder);
  
    const emailChange = (e, index) =&gt; {
      holder[index].item = e.target.value;
      setFields(holder);
    };
    let FormInput = [&quot;&quot;];
  
    const [inviteSent, setInviteSent] = useState(false);
  
    useEffect(() =&gt; {
      if (inviteSent &amp;&amp; fields[holder.length - 1].email.value) {
        setInviteSent(false);
        console.log(inviteSent);
      }
    }, [inviteSent, fields[holder.length - 1].email.value]);
    const addAnother = () =&gt; {
      holder = [holder + CloneFields];
      setFields(holder);
    };
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        {fields.map((item, index) =&gt; (
          &lt;input
            type=&quot;name&quot;
            placeholder=&quot;Name&quot;
            value={fields[index].item.value}
            onChange={emailChange}
          &gt;&lt;/input&gt;
        ))}
        &lt;div onClick={addAnother}&gt;add another +&lt;/div&gt;
  
        &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>the sandbox:</p>
  <p><a href="https://codesandbox.io/s/tender-mountain-b3cp2?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/tender-mountain-b3cp2?file=/src/App.js</a></p>
  <p>any advice is super useful, as i cant seem to get my head around the map function used in this context.</p>