change value of a nested object using setState hook in react

Question

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

Have a look at this [link](https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react?page=1&tab=votes#tab-top) talks about how nested state is not a great idea. I ran into the same issue just a few days ago and made use of reactjs flux — Jarne Kompier, Sep 14 '21 at 14:14
I suggest you change your state to an object or keep it as an array but add a new property called id to each object to simplify the structure — Ramesh Reddy, Sep 14 '21 at 14:15

score 0 · Accepted Answer · answered Sep 15 '21 at 15:15

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.

Here is the working Example with React.

change value of a nested object using setState hook in react

1 Answers1