I have an array with objects that also contain array. How can I push element to that array inside object using useState?
const [list, updateList] = useState([defaultList]);
const defaultList = [
{
"name":"Element 1",
"subList": [{"name": "Element 1"}]
}
]
How can I update subList in that case?
If you have one item in your array, you must recreate your array with new/modified data in it.
updateList(state => {
const stateCopy = [...state]
stateCopy[index] = {
...stateCopy[index],
subList: [...state[index].subList, newItem]
}
return stateCopy
})
If you want to update based on the item name.
updateList(state => {
const stateCopy = [...state]
const indexOfName = stateCopy.findxIndex(item => item.name === name)
stateCopy[indexOfName] = {
...stateCopy[indexOfName],
subList: [...state[indexOfName].subList, newItem]
}
return stateCopy
})
Assuming you want to append an item to the sublist of a specific list item, based on index:
function appendSublistItemForItemAtIndex(newItem, index) {
updateList([
...list,
[index]: {
...list[index],
subList: [
...list[index].subList,
newItem
]
}
])
}
Then call this function wherever needed for your component (some callback, in a useEffect hook, etc.)
