Updating array of objects by using useState hook in reactjs - reactjs

Question

I have this state of array of object. I use them to create three cards.
const [option, setOption] = useState([{
id: 1,
label: "Borrowers",
icon: FcApprove,
counter: 2,
link: "borrowers",
color: "#5d8c6d",
isActive: false,
},
{
id: 2,
label: "My Offer",
icon: FaHandsHelping,
counter: 2,
link: "offer",
color: "#04738a",
isActive: false,
},
{
id: 3,
label: "Promise",
icon: FaPrayingHands,
counter: 2,
link: "promise",
color: "#40437a",
isActive: false,
}
]);
Whenever one of these cards is clicked, I would like to update the field isActive to true as follows.
function FixedHeader() {
const [options, setOptions] = useState(option); //option is the above mentioned array of object
const handleChange = (opt) => {
setOption([option[index].isActive: true])
}
return < > {
options.map((opt, index) => {
<Card onClick={handleChange(opt,index)} key={index} className={opt.isActive ? "activecard": ""}>
<CardContent>
<Stack direction="column">
<opt.icon size={20}/>
<Typography>opt.label</Typography>
</Stack>
</CardContent>
</Card>
})
}
My code somewhat looks the above one. but it is not literally changing isActive filed

Answer 1

You are mutating the options array. When you want to update an array stored in state, you need to create a new one (or make a copy of an existing one), and then set state to use the new array.
Below will fix your issue
const handleChange = (options, index) => {
setOption(options.map((option, i) => ({...option, isActive: i === index }));
}

Answer 2

options is an array. You will want to map the previous state array to the next state array, updating the specific element object by the id property.
const [options, setOptions] = useState(option);
// Curried function to close over option id in callback scope
const handleChange = (id) => () => {
setOption(options => options.map(option => option.id === id
? { ...option, isActive: true }
: option
);
}
options.map((opt) => (
<Card
key={opt.id}
onClick={handleChange(opt.id)}
className={opt.isActive ? "activecard" : ""}
>
<CardContent>
<Stack direction="column">
<opt.icon size={20} />
<Typography>opt.label</Typography>
</Stack>
</CardContent>
</Card>
)

Answer 3

There are several issues going on here, the first being you should be using the useCallback hook when you are updating anything set in useState:
export default function FixedHeader() {
const [options, setOptions] = useState(myOptions);
const onClick = useCallback((id) => {
setOptions(options.map((opt) => {
if (opt.id === id) {
opt.isActive = !opt.isActive
}
return opt
})
)}, [options])
return (
<div>
{
options.map((option) => (
<div style={{ backgroundColor: option.isActive ? 'blue' : 'red' }}>
<button onClick={() => onClick(option.id)}>{option.label}</button>
</div>
))
}
</div>
);
}
Note that I was rendering something different than you to test this out, so make sure instead of passing in the index you pass the option.id like so:
onClick={() => onClick(option.id)}