title: How do I update states `onChange` in an array of object in React Hooks
body: <p>I have retrieved datas stored using <code>useState</code> in an array of object, the datas was then outputted into form fields. And now I want to be able to update the fields (state) as I type.</p>
  <p>I have seen examples on people updating the state for property in array, but never for state in an array of object, so I don't know how to do it. I've got the index of the object passed to the callback function but I didn't know how to update the state using it.</p>
  <pre class="lang-js prettyprint-override"><code>// sample data structure
  const datas = [
    {
      id: 1,
      name: 'john',
      gender: 'm'
    }
    {
      id: 2,
      name: 'mary',
      gender: 'f'
    }
  ]
  
  const [datas, setDatas] = useState([]);
  
  const updateFieldChanged = index =&gt; e =&gt; {
    console.log('index: ' + index);
    console.log('property name: '+ e.target.name);
  
    setData() // ??
  }
  
  return (
    &lt;React.Fragment&gt;
      {datas.map((data, index) =&gt; {
        &lt;li key={data.name}&gt;
          &lt;input type=&quot;text&quot; name=&quot;name&quot; value={data.name} onChange={updateFieldChanged(index)} /&gt;
        &lt;/li&gt;
      })}
    &lt;/React.Fragment&gt;
  )
  </code></pre>