Need to change isClicked on click like a toggle to !isClicked. It renders JSX styles for a button click.
My data:
const [isApply, setIsApply] = useState([
{
"0": {
"isClicked": false,
"isExpand": false,
"uni": "NSBM"
}
},
{
"1": {
"isClicked": false,
"isExpand": false,
"uni": "NSBM"
}
},
{
"2": {
"isClicked": false,
"isExpand": false,
"uni": "SLIIT"
}
},
{
"3": {
"isClicked": false,
"isExpand": false,
"uni": "SLIIT ACADEMY"
}
},
{
"4": {
"isClicked": false,
"isExpand": false,
"uni": "NIBM"
}
},
{
"5": {
"isClicked": false,
"isExpand": false,
"uni": "NIBM"
}
}
])
const apply = (e) => {
console.log("clicked button id: ", e.currentTarget.id);
console.log(isApply);
setIsApply(...)
};
Need to change isClicked on click like a toggle(!isClicked). It renders jsx styles for a button click. Because it's a nested object and object keys are generated with button click ID it makes it harder to set the state of isClicked need help
I think you're doing something wrong when spreading object. You have to consider object spreading
When object spreading, The placement of spread operator could effect on the action you're performing.
✗ Wrong
{ isClicked: !state[key]?.isClicked, ...state[key] }
Here even you're updating isClicked value it's not effect on object because since you're adding ...state[key] after updating isClicked value. It replaces the original object by itself.
✔ Correct
{ ...state[key], isClicked: !state[key]?.isClicked }
Here you put your current state by adding ...state[key] and then updating the isClicked value of that particular object.