I'm creating a simple tracker that has a state checking if the button is either false (not checked) or true (checked).
The structure of my data is something like this:
const [test, setTest] = useState([
{
character: 1,
two: [
{ name: "one", id: 1, check: false },
{ name: "two", id: 2, check: true },
],
},
{
character: 2,
two: [
{ name: "one", id: 1, check: true },
{ name: "two", id: 2, check: false },
],
},
])
I tried creating a function that resets all of the check values back to false.
The user can delete a character or add more so I need to reset all character checks at the same time. I managed to do this but I'm not sure if the method I used is acceptable or not.
The only way I could solve this is to create a variable which has the value of my test state then make changes to the array and at the end; set my test state to equal the array.
let array = test
array.forEach((arr, index) => {
array = ([
...array.slice(0, index),
{
character: arr.character,
two: [
{ name: "one", id: 1, check: false },
{ name: "two", id: 2, check: false },
],
},
...array.slice(index + 1)
])
})
setTest(array)
I spent some time trying to make this work using only the test state but always encountered the same issue that it would only reset the two checks of the last character in the array.
If anyone could help me with understanding this better and if there is a way to write this without having to use a variable(array) that would be great, thanks.
edit: I forgot to include that the two array will sometimes have more or less objects in the array so would need to change all their values. example:
[{
character: 1,
two: [
{ name: "one", id: 1, check: false },
{ name: "two", id: 2, check: true },
],
},
{
character: 2,
two: [
{ name: "one", id: 1, check: true },
{ name: "two", id: 2, check: false },
{ name: "three", id: 3, check: false },
{ name: "four", id: 4, check: true },
],
},
]
You could use Array.map, which will return a new array with reset values.
const resetTest= test.map((arr, index) => {
return {
character: arr.character,
two: [
{ name: "one", id: 1, check: false },
{ name: "two", id: 2, check: false },
],
};
});
// You may need to use this syntax to set the array...
setTest((testValues) => [...testValues, ...resetTest]);
Just use setTest state update dispatch method and map through all of your previous state array entries to return new array which will hold updated object, where they will have all properties spread from old object and property two will also be mapped new array with immutably updated objects (check set to false).
const resetToFalse = () => {
setTest(prevState => prevState.map(entry => ({
...entry,
two: entry.two.map(obj => ({ ...obj, check: false }))
}
)));
}