I have an array like this:
a=[{id:1 , operand:2 ,children:[{a:1]{b:2}]
And I do this when I want to add a new field:
const [items, setItems] = useState(a);
const gettableData = (value) => {
let operanList = items;
let repeatListError = tableData.filter((i) => i.operandId === value.operandId);
if (!repeatListError.length > 0) operanList.push(value);
setTableData(operanList);
};
This method is called every time I click a button. I want to check operand when I add a new object, if there is only update children.like:
value=[{id:1 , operand:2 ,children:[{a:1]{b:2}{c:3}{d:4}]
First reformat value like the following.What you have is incorrect in syntax:
const value=[{id:1 , operand:2 ,children:{a:1,b:2,c:3,d:4}}]
This how you can change the children inside the objects that are in your array:
const list = [
{ id: 1, operand: 2, children: { a: 1, b: 2, c: 3, d: 4 } },
{ id: 2, operand: 3, children: { a: 1, b: 2, c: 3, d: 4 } },
];
let newList = [...list];
let updatedChildren = { ...newList[1].children, e: 5, f: 6 };
let updatedItem = { ...newList[1], children: updatedChildren };
newList.splice(1, 1, updatedItem);
console.log(newList);
setState(newList);
you create a new instance of the array. update the children attribute of your desired item ( in this case i chose 1 ). then update the entire object that is in your array ( it contains the id & operand and children ). and finally mutate the newList with replacing the original item by the new one. In the splice method remember the second number must always be one, as it will remove one item and the first number given should be the index of the item that is needed to be changed ( in this case we chose one). then you can continue with setting the state as you wish since you have a new, updated list.
I see some inconsistencies in the variable names used in your code, e.g. where is tableData? Is it the items which is part of state?
I don't understand if children is an array of objects or just an object with key value pairs.
Anyway, as I mentioned in my comment, the easiest way to achieve this is using map. Consider it to be a generic implementation and try to use it in your code.
const a=[{id:1 , operand:2 ,children:[{a:1]{b:2}] // What is the data stucture of children? Is it array of objects or just object?
const [items, setItems] = useState(a);
const gettableData = (value) => {
// creating a copy is not required as map will return a new array.
// map => filter + modify, so use map
let updatedList = tableData.map((i) => {
if (i.operandId === value.operandId) {
// match found, so update children
return {
...i, // first, copy everything from i
children: [ // then update children, and since children is an array of objects
...i.children, // first copy every key of i's children
...value.children // then copy value's children
]
}
}
return i; // no match? return i as it is.
});
setItems(updatedItems)
You have to put the array in another variable and tell it that if it has children, it will remember it in the children field and set a new value for it.