const [isItemExpand, setIsItemExpand] = useState([{ ind: 0, isExpand: false }])
this is my function to make related state true
const handleExpand = (i: number) => {
const newList = [...isItemExpand]
newList[i] = { ind: i, isExpand: !isItemExpand[i].isExpand }
setIsItemExpand(newList)
}
I need to make index related state true while at the same time states not equal to index need make false, How can I achieve that in the same function above
as a example - in current condition, if I expand (index 1), then expand (index 2) my array looks like
0: {ind: 0, isExpand: false}
1: {ind: 1, isExpand: true}
2: {ind: 2, isExpand: true}
3: {ind: 3, isExpand: false}
but after expanding (index 2) I expect array like this
0: {ind: 0, isExpand: false}
1: {ind: 1, isExpand: false}
2: {ind: 2, isExpand: true}
3: {ind: 3, isExpand: false}
to achieve this i need to reset all other states to false expect which matches with index
If I understand the goal correctly - that only one element should have isExpand = true - then you can map the items and set false or true depending on the ind condition
const handleExpand = (i: number) => {
const newList = isItemExpand.map((item) => ({ ...item, isExpand: item.ind === i }));
setIsItemExpand(newList);
};
updated
const handleExpand = (i: number) => {
const newList = isItemExpand.map((item) =>
({ ...item, isExpand: (item.ind === i) ? !item.isExpand : false });
setIsItemExpand(newList);
};