/TypeScript/Array of object react js useState

Array of object react js useState

// 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 vote187 views1 answer
Typescript number to hex string
TypeScript
0 vote208 views1 answer
Some of contents don't show in FragmentBottomSheetDialog
TypeScript
0 vote191 views1 answer
What is use hsts in .net core
TypeScript
0 vote149 views1 answer
NFS is reporting that your exports file is invalid. Vagrant does this check before making any changes to the file. Please correct the issues below and execute "vagrant reload":
TypeScript
-1 vote177 views1 answer
2d array of strings and ints python
TypeScript
0 vote205 views1 answer
AFTER RESETTING ANGULAR FORM I AM GETTING RED INVALID FORM
TypeScript
0 vote191 views5 answers
[email protected]
TypeScript
9 votes198 views2 answers
Multiple where statements sql
TypeScript
0 vote190 views1 answer
Merge enum typescript
TypeScript
0 vote203 views1 answer
Stripe create customer
TypeScript