Toggling actions individually in cards mapped over - reactjs

Question

I have cards that are mapped over They all have a toggle button menu and Im trying to figure out how to target the menu's individually since they are controlled by a single part of the state Im not even sure this is possible. But I think it should be right? I have created a simple working example here. Im not sure if I can use the ID of them to target them individually but im not sure how to implement that. Any advice would be helpful thanks!

Answer 1

1) First of all you can't control all state of Items with single boolean state, You can create open as an array and then initially set it as false.
const [open, setOpen] = useState(Array.from(Items, () => false));
2) When you want to toggle particular element then you can use index
onClick={() => toggle(idx)}
3) Then you have to handle 2 cases where you update newOpenState
case: 1: when you update respective state after you click on the button. In this case you are just toggling the value which is present at the index idx
<Button
isOpen={open[idx]}
onClick={() => toggle( idx )}
style={{
width: "30px",
height: "30px",
marginTop: "25px",
marginLeft: "10px"
}}
/>
case 2: When you externally providing the value
<Col
md="12"
onClick={() => toggle( idx, false )}
className="editCol"
>
So these two cases are covered by using a single expression as:
newOpenState[index] = value ?? !newOpenState[index];
what above statement means is if the value is provided(case 2) then you just have to assign the value to newOpenState[index]. If you haven't provided the value(case 1) then it will be undefined, and you have to just toggle the value of newOpenState[index]. I've used using Nullish coalescing operator (??) you can assign the right hand side value of ?? if left hand side of value is undefined or null.
CODE
import "./styles.css";
import { Card, Button, Col, Row } from "reactstrap";
import { useState } from "react";
const Items = [
{
name: "Test 1",
ID: 1234
},
{
name: "Test 2",
ID: 4321
},
{
name: "Test 3",
ID: 3421
}
];
export default function App() {
const [open, setOpen] = useState(Array.from(Items, () => false));
const toggle = (index, value) => {
const newOpenState = [...open];
newOpenState[index] = value ?? !newOpenState[index];
setOpen(newOpenState);
};
return (
<>
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
<div style={{ display: "flex", justifyContent: "space-between" }}>
{Items.map((item, idx) => (
<Card
key={idx}
style={{
border: "solid",
borderColor: "#00000",
margin: "5px",
width: "150px",
display: "flex",
justifyContent: "center"
}}
>
<h1>{item.name}</h1>
<span style={{ display: "flex" }}>
{!open[idx] ? (
<Button
isOpen={open[idx]}
onClick={() => toggle(idx)}
style={{
width: "30px",
height: "30px",
marginTop: "25px",
marginLeft: "10px"
}}
>
...
</Button>
) : (
<Card
style={{
border: "solid 1px",
borderColor: "#00000",
margin: "5px"
}}
>
<Row>
<Col md="12" className="closeMenu">
<span className="X" onClick={() => toggle(idx, false)}>
X
</span>
</Col>
</Row>
<Row>
<Col
md="12"
onClick={() => toggle(idx, false)}
className="editCol"
>
<span
className="editName"
onClick={() => setOpen(item.ID)}
>
Edit Name
</span>
</Col>
</Row>
<Row>
<Col md="12">
<span
className="deleteForm"
onClick={() => handleFormDelete(item.ID)}
>
Delete
</span>
</Col>
</Row>
</Card>
)}
</span>
</Card>
))}
</div>
</>
);
}