the way to use setState with object - reactjs

Question

import React, {useState} from "react";
const SideListItem = () => {
const [showItem, setShowItem] = useState([
{id: "List A", clicked: true},
{id: "List B", clicked: true},
{id: "List C", clicked: true},
]);
const clickList = () => {
const value = showItem[0].clicked;
setShowItem(() => {
const boolValue = value? false: value === true;
return boolValue;
});
return console.log(value);
};
I want to make the next process below.
when I click a button, the value of state is chaged.
=> if it is "true", then it changed in "false". And if "false", then "true".
But, my code didn't work... When I used state with number, string, boolean, It worked.
Is there a way to use state with object?
Thank you in advance!
I tried this code.
const [clicked, setClicked] = useState(false);
const clickList = () => setClicked(!clicked);
But, I want to use state with object.

Answer 1

You can do it like this and add more statements if needed:
const clickList = () => {
setShowItem(prevState => {
return prevState.map(item => {
if (item.id === "List A") {
return {...item, clicked: !item.clicked};
}
return item;
});
});
};
But it's better to get the id as param like this:
const clickList = (id) => {
setShowItem(prevState => {
return prevState.map(item => {
if (item.id === id) {
return {...item, clicked: !item.clicked};
}
return item;
});
});
};

Answer 2

You can handle it in this way :
const clickList = () => {
setShowItem(prevState => {prevState.map(item=>({...item,clicked:!item.clicked})));
};

Answer 3

You can transform the previous state of the array to one where the clicked property of the clicked item is toggled. Since you didn't provide any html I added some example html, swap it out for your own markup and use the onClick event as such:
const { useCallback, useState } = React;
const SideListItem = () => {
const [showItem, setShowItem] = useState([
{id: "List A", clicked: true},
{id: "List B", clicked: true},
{id: "List C", clicked: true},
]);
const handleClick = useCallback(id => {
setShowItem(p => p.map(item => {
if (item.id === id) {
return {
...item,
clicked: !item.clicked
}
}
return item;
}));
}, []);
return showItem.map(item =>
<div key={item.id} onClick={() => handleClick(item.id)}>
Clicked: {item.clicked ? "yes" : "no"}
</div>
);
}
ReactDOM.createRoot(
document.getElementById("root")
).render(
<SideListItem />
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>