I am having an object containing array of objects with following format which is stored in a state
const [value, setVal] = useState({ available : [], done: [] })
done
is an array of objects with following structure
[{col: "test", val: ["abc","xyz"]}]
I am writing a function that takes field
and value
as input parameters. If the field is present in done
array, then I need to push it inside its corresponding val
array. Else I need to create a new object and then push it inside. How can I achieve this?
How can I set the state in both the cases?Code that I tried is below
function update(field, value){
const filterIndex = value.done.findIndex((obj) => field === obj.col);
if (filterIndex > -1) {
value.done[filterIndex].val.push(value);
} else {
setVal({
...value,
done: [
...value.done,
{
col: field,
val: [value],
}
]
});
}
}
CodePudding user response:
You should use a separate variable name for the state instead of value
since the function has a local variable also called value
.
Try like below.
const [values, setVals] = useState({ available: [], done: [] })
function update(field, value) {
const filterIndex = values.done.findIndex((obj) => field === obj.col);
if (filterIndex > -1) {
// get a copy of the previous state done values
const updatedDone = [...values.done];
// update the new value in the copy of the array
updatedDone[filterIndex].val.push(value);
// update the state
setVals((prevValue) => ({ ...prevValue, done: updatedDone }));
} else {
// add the new entry for the new filed with the value
setVals((prevValue) => ({
...prevValue,
done: [
...prevValue.done,
{
col: field,
val: [value],
},
],
}));
}
}
CodePudding user response:
This may be one possible solution:
Code Snippet
const stateVal = { available : [], done: [{col: "test", val: ["abc","xyz"]}] };
const updateStateVal = (sv, field, value) => ({
...sv,
done: (
sv.done.map(ob => ob.col).includes(field)
? sv.done.map(ob => (
ob.col === field
? {...ob, val: ob.val.concat([value])}
: {...ob}
))
: sv.done.concat([{ col: field, val: [value] }])
)
});
console.log('existing col test: ', updateStateVal(stateVal, 'test', 'def'));
console.log('non-exist col test2: ', updateStateVal(stateVal, 'test2', 'def'));
How to use
setVal(prev => ({...updateStateVal(prev, field, value)}));
Explanation
The objective is to insert
value
based on presence/absence offield
indone
.The method
updateStateVal
takes 3 params, the prev-statesv
, thefield
& thevalue
Use
...
spread operator to list down all props of prev (ie,sv
) as-isNow, override the
done
propFirst check if the prev-state's
done
already hasfield
by matching with thecol
s from each array-element.This is done using
.map()
in conjunction with.includes()
If found, iterate through the
done
array.For the array element where
col
matchesfield
,.concat
the existingval
array withvalue
. All other elements go as-is.If not found, simply
.concat
a single-element array ([{ col: field, val: [value]}]
) to existingdone
array.