'How to update value within an array in react state?
I am trying to update values within state array.
Initial state values are like:
const [itemList, setItemList] = useState([
{
"id": "0",
"items": [
{
"key": "Player name",
"value": "Sandy",
"type": "trained"
},
{
"key": "Player status",
"value": "status here",
"type": "untrained"
}
]
},
{
"id": "1",
"items": [
{
"key": "Check Number",
"value": "0027858403",
"type": "untrained"
},
{
"key": "Check Date",
"value": "01/22/2010",
"type": "trained"
}
]
} ]);
I want to update value for array element 'type' set this from 'untrained to trained' by using 'id' element of array.
For Ex: On button click, I want to update 'type: trained' for 2nd array element where 'key = Check Number'.
My function for this is like below:
onClickHandler=(id, data)=>{
setItemList((prev)=>prev.map((item)=>{
if(item.id === id){
item.items.map((itm)=>{
if(itm.key === data){
return {...itm,type: 'trained'}
}
else{
return itm;
}
})
}
else{
return item;
}
}))
}
so, onClick={onClickHandler(1, 'Check Number')} where '1' is array id and 'Check Number' is value for 'key' element.
Final output should look like this:
const [itemList, setItemList] = useState([
{
"id": "0",
"items": [
{
"key": "Player name",
"value": "Sandy",
"type": "trained"
},
{
"key": "Player status",
"value": "status here",
"type": "untrained"
}
]
},
{
"id": "1",
"items": [
{
"key": "Check Number",
"value": "0027858403",
"type": "trained"
},
{
"key": "Check Date",
"value": "01/22/2010",
"type": "trained"
}
]
} ]);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
