title: React trigger only one element in array
body: <p>I am in the process of making a comment system like the one on youtube. In my implementation, when I click on modify, all comments are now inputs but only the value of the selected input will be modified. how to trigger only the element i clicked.</p>
  <p><a href="https://i.stack.imgur.com/xWBWD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xWBWD.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/RLzEi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RLzEi.png" alt="enter image description here" /></a></p>
  <p>as you can see it triggers all the array elements</p>
  <pre><code>function App() {
    const [open, setOpen] = useState(false);
  
    return (
      &lt;div className=&quot;container mt-5&quot;&gt;
        &lt;MDBRow&gt;
          {data &amp;&amp;
            data.map((item) =&gt; (
              &lt;MDBCol md=&quot;7&quot; lg=&quot;7&quot; key={item.id} className=&quot;mb-4&quot;&gt;
                {!open &amp;&amp; (
                  &lt;&gt;
                    &lt;div className=&quot;font-weight-bolder float-left pr-2&quot;&gt;
                      {item.name}
                    &lt;/div&gt;
                    &lt;div className=&quot;float-right pr-2&quot;&gt;
                      &lt;button
                        onClick={() =&gt; {
                          setOpen(true);
                        }}
                      &gt;
                        Modifier
                      &lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/&gt;
                )}
                {open &amp;&amp; (
                  &lt;UpdateData
                    id={item.id}
                    name={item.name}
                    onAbort={() =&gt; setOpen(false)}
                    submit={() =&gt; setOpen(false)}
                  /&gt;
                )}
              &lt;/MDBCol&gt;
            ))}
        &lt;/MDBRow&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <pre><code>
  export const UpdateData = ({ name, id, onAbort, submit }) =&gt; {
    const formik = useFormik({
      initialValues: {
        id: id,
        name: name,
      },
      onSubmit: async (values) =&gt; {
        console.log(values);
        submit();
      },
    });
  
    return (
      &lt;form onSubmit={formik.handleSubmit}&gt;
        &lt;MDBInput
          value={formik.values.name}
          name=&quot;name&quot;
          onChange={formik.handleChange}
        /&gt;
        &lt;div className=&quot;float-right&quot;&gt;
          &lt;span onClick={onAbort} className=&quot;text-capitalize grey-text&quot;&gt;
            Cancel
          &lt;/span&gt;
          &lt;button type=&quot;submit&quot;&gt;confirm&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    );
  };
  </code></pre>
  <p>And this is the <a href="https://codesandbox.io/s/festive-cloud-r4itr" rel="nofollow noreferrer">sandbox</a>
  that i have created</p>