const Row = [ { name: "jad", link :"/jad", calories :"52", Fat :"4", Carbs :"5", Protein :"41" }, { name: "john", link :"/john", calories :"82", Fat :"42", Carbs: "35", Protein :"1" } ] const [myList, setMyList] = React.useState(Row); function handle(){ setMyList() } <TableBody> { myList.map((item)=> { return ( <TableRow> <TableCell><Link href={item.link}>{item.name}</Link></TableCell> <TableCell align="right">{item.calories}</TableCell> <TableCell align="right">{item.Fat}</TableCell> <TableCell align="right">{item.Carbs}</TableCell> <TableCell align="right">{item.Protein}</TableCell> <TableCell align="right"><Button variant="contained">Edit</Button><Button variant="outlined" startIcon={<DeleteIcon />}> Delete</Button></TableCell> </TableRow> ) }) } </TableBody>
Parses
myList
by looping, finds a specific key, updates the key's new value, and then uses the updatedmyList
setMyList
.