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

Answer 1

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.