title: React hooks updating a parent state from multiple child components
body: <p>My parent component makes copies of child component onClick. My goal is for every child component, after a user inputs a select value and a textfield value it appends onto the parent component's map value. I used an approach that passes in a function that edits the map object, but after console logging I realize it just resets the map value for every child component submission. Any suggestions on how to fix this problem?</p>
  <p>ex) if user picks instagram with 'www.instagram.com/user' in one child component and facebook with 'www.facebook.com/user' in the other child component, the parent component will ultimately have a map of both key value pairs.</p>
  <p>Parent component (Admin.js)</p>
  <pre class="lang-js prettyprint-override"><code>const Admin = () =&gt; {
    const links = new Map();
    const [newLink, setNewLink] = useState([]);
  
    const addLinkToMap = (type, url) =&gt; {
      links.set(type, url);
    }
  
    return (
      &lt;&gt;
        {newLink ? newLink.map(child =&gt; child) : null}
          &lt;Button onClick={() =&gt; {
             setNewLink(
               [ ...newLink, 
                 &lt;AddNewLink key={Math.random()} linkMap={addLinkToMap}/&gt;
               ]
          )}}&gt;
            Add new social media
          &lt;/Button&gt;
      &lt;/&gt;
    );
  }
  
  export default Admin;
  
  </code></pre>
  <p>Child component (AddNewLink.js)</p>
  <pre class="lang-js prettyprint-override"><code>const AddNewLink = props =&gt; {
    const [socialMedia, setSocialMedia] = useState('');
    const [url, setUrl] = useState('');
    const linkMap = props.linkMap;
  
    const handleSubmit = () =&gt; {
      linkMap(socialMedia, url);
    }
  
    return (
      &lt;&gt;
        &lt;FormControl&gt;
          &lt;InputLabel&gt;Select Social Media&lt;/InputLabel&gt;
            &lt;Select
              value={socialMedia}
              onChange={e =&gt; {setSocialMedia(e.target.value)}}
            &gt;
              &lt;MenuItem value={'facebook'}&gt;Facebook&lt;/MenuItem&gt;
              &lt;MenuItem value={'instagram'}&gt;Instagram&lt;/MenuItem&gt;
              &lt;MenuItem value={'tiktok'}&gt;TikTok&lt;/MenuItem&gt;
            &lt;/Select&gt;
        &lt;/FormControl&gt;
        &lt;form&gt;
          &lt;TextField label=&quot;Enter link&quot; onChange={e =&gt; {setUrl(e.target.value)}}/&gt;
        &lt;/form&gt;
        &lt;div&gt;
          &lt;Button onClick={() =&gt; handleSubmit()}&gt;Submit&lt;/Button&gt;
        &lt;/div&gt;
      &lt;/&gt;
    )
  }
  
  export default AddNewLink;
  </code></pre>