react update state array of objects hooks

1// sample datas structure
2/* const datas = [
3    {
4      id:   1,
5      name: 'john',
6      gender: 'm'
7    }
8    {
9      id:   2,
10      name: 'mary',
11      gender: 'f'
12    }
13] */ // make sure to set the default value in the useState call (I already fixed it)
14
15const [datas, setDatas] = useState([
16    {
17      id:   1,
18      name: 'john',
19      gender: 'm'
20    }
21    {
22      id:   2,
23      name: 'mary',
24      gender: 'f'
25    }
26]);
27
28const updateFieldChanged = index => e => {
29
30    console.log('index: ' + index);
31    console.log('property name: '+ e.target.name);
32    let newArr = [...datas]; // copying the old datas array
33    newArr[index] = e.target.value; // replace e.target.value with whatever you want to change it to
34
35    setDatas(newArr); // ??
36}
37
38return (
39    <React.Fragment>
40        { datas.map( (data, index) => {
41              <li key={data.name}>
42                <input type="text" name="name" value={data.name} onChange={updateFieldChanged(index)}  />
43              </li>
44          })
45        }
46    </React.Fragment>
47)
48

1React find and update state value

1React fin and update state value

1Find & Update state