title: How to return multiple times same component but with independant state?
body: <p>Hi guys in react i want to do something like render 2 times a component in same render function like this</p>
  <pre><code>const Main()=&gt;{
  
  const [names, setNames] = useState([]);
  const [selected, setSelected] = useState(-1);
  
  return(
      &lt;Component1 name={names[selected].name}
                  setName={setNames}/&gt;
  
      &lt;Component1 name={names[selected].name}
                  setName={setNames}/&gt;
  )
  }
  </code></pre>
  <p>This where i passed <code>setNames</code> from <code>Main()</code> to <code>Component1</code> to handle state
  and pass <code>names</code>  from Main() then map it in select of <code>Component1</code></p>
  <pre><code>&lt;StyledSelect
         ml=&quot;10px&quot;
         onChange={(e) =&gt; {
         setName(e.target.value);
          value={name}&gt;
         {names.map(({ name}) =&gt; {
           return (
                  &lt;option key={name} value={name}&gt;
                    {name}
                  &lt;/option&gt;
                  );
           })}
  </code></pre>
  <p>my component has an html select that has names in it, when i choose one it trigger a   it in database and retrieve name data (age, location), the problem is when i select name on my second Component1, it will also select the same name and retrieve same name data on my first Component1, and i want them to be independent. How ?</p>
  <p>I tried to put key like that</p>
  <pre><code>return(
      &lt;Component1 key=&quot;compare&quot; name={name}/&gt;
      &lt;Component1 key=&quot;compared&quot; name={name}/&gt;
  )
  </code></pre>
  <p>but nothing changes</p>
  <p>Thanks</p>