/TypeScript/React setstate in hooks to array of objects value

React setstate in hooks to array of objects value

// sample datas structure
/* const datas = [
    {
      id:   1,
      name: 'john',
      gender: 'm'
    }
    {
      id:   2,
      name: 'mary',
      gender: 'f'
    }
] */ // make sure to set the default value in the useState call (I already fixed it)

const [datas, setDatas] = useState([
    {
      id:   1,
      name: 'john',
      gender: 'm'
    }
    {
      id:   2,
      name: 'mary',
      gender: 'f'
    }
]);

const updateFieldChanged = index => e => {

    console.log('index: ' + index);
    console.log('property name: '+ e.target.name);
    let newArr = [...datas]; // copying the old datas array
    newArr[index] = e.target.value; // replace e.target.value with whatever you want to change it to

    setDatas(newArr); // ??
}

return (
    <React.Fragment>
        { datas.map( (data, index) => {
              <li key={data.name}>
                <input type="text" name="name" value={data.name} onChange={updateFieldChanged(index)}  />
              </li>
          })
        }
    </React.Fragment>
)

Source: stackoverflow.com

Similar codes

0 vote175 views1 answer
Subplots titles
TypeScript
3 votes161 views1 answer
How to create a dataframe from two lists in python
TypeScript
0 vote174 views1 answer
2. Write a program to draw this. Assume the innermost square is 20 units per side, and each successive square is 20 units bigger, per side, than the one inside it.
TypeScript
47 votes209 views3 answers
Random elements in python list
TypeScript
0 vote168 views1 answer
How to check if all elements are equal C#
TypeScript
1 vote149 views1 answer
Remove all children of node in typescript
TypeScript
16 votes156 views5 answers
For loop typescript
TypeScript
-1 vote162 views1 answer
10 elements of gothic literature
TypeScript
1 vote159 views1 answer
Whats the file path for the documents folder linux
TypeScript
3 votes159 views1 answer
Can't bind to 'formcontrol' since it isn't a known property of 'input'.
TypeScript