necesito ayuda con el manejo de los estados de un componente modal, lo que estoy haciendo es recibiendo un array de ítems desde una API, asignándoselos a un estado. La idea es que por cada elemento crear una fila con el nombre del ítem y dos botones para editar o eliminar y que al hacerlo se abra un modal con la información de ese ítem en específico, de igual manera al dar click al nombre del item se lanzara un modal con toda su información.
Para esto utilizo la dependencia "react-modal", cuya prop isOpen={itemInfoModalIsOpen}
lo manejo con useState y por medio de una función que asocio con eventos onClick en botones cambio ese estado. Dentro de dicho modal estan componentes a los cuales les envío el ítem como prop
No note el problema de esto al principio, pero ahora si me encuentro con el error de que, todos los elementos del array comparten las mismas props para el modal, por lo tanto, cuando le doy abrir a alguno, se abren los demás modales de todos los demás items al mismo tiempo, note este error al darle un console.log() al item que recibia el prop y se mostraba array.length número de veces en consola, es decir que se abren todas al mismo tiempo, sin importar a cuál le di clic.
Como podria hacer para que al activar algún modal, solo se active el modal del item al cual le di click? lo mismo para los botonoes de "editar" y "eliminar" ?
Este es el componente al completo:
const Dashboard = () => {
const [items, setItems] = useState([]);
const [deleteModalIsOpen, setDeleteModalIsOpen] = useState(false);
const [newItemModalIsOpen, setNewItemModalIsOpen] = useState(false);
const [itemInfoModalIsOpen, setItemInfoModalIsOpen] = useState(false);
useEffect(() => {
async function fetchData() {
await axios
.get(
`https://api`
)
.then((response) => {
console.log(response);
setItems(response.data.items);
});
}
fetchData();
}, []);
function openModal(modalName: string) {
switch (modalName) {
case "delete": {
setDeleteModalIsOpen(true);
break;
}
case "add": {
setNewItemModalIsOpen(true);
break;
}
case "info": {
setItemInfoModalIsOpen(true);
break;
}
}
}
function closeModal(modalName: string) {
switch (modalName) {
case "delete": {
setDeleteModalIsOpen(false);
break;
}
case "add": {
setNewItemModalIsOpen(false);
break;
}
case "info": {
setItemInfoModalIsOpen(false);
break;
}
}
}
return (
<div className="dashboard__container">
<header className="dashboard__header flex">
<div className="dashboard__header--btns">
<button onClick={() => openModal("add")} id="add-item">
Add product
</button>
<button id="search-item">Search</button>
</div>
</header>
<div className="items__container">
{items.length === 0 ? <h1>There are no items</h1> : null}
{items.map((item:any) => {
return (
<div className="item__container flex" key={item.id}>
<p
onClick={() => openModal("info")}
className="item__title"
>
{item.serial}
</p>
<div className="item__btns">
<button className="edit__btn">Edit</button>
<button
onClick={() => openModal("delete")}
className="delete__btn"
>
Delete
</button>
</div>
<Modal
isOpen={itemInfoModalIsOpen}
onRequestClose={() => closeModal("info")}
style={customModalStyles}
contentLabel="Item Info"
>
<ItemInfo
item={item}
setItemInfoModalIsOpen={
setItemInfoModalIsOpen
}
/>
</Modal>
<Modal
isOpen={deleteModalIsOpen}
onRequestClose={() => closeModal("delete")}
style={customModalStyles}
contentLabel="Delete Item"
>
<DeleteItem
item={item}
setDeleteModalIsOpen={setDeleteModalIsOpen}
/>
</Modal>
<Modal
isOpen={newItemModalIsOpen}
onRequestClose={() => closeModal("add")}
style={customModalStyles}
contentLabel="Add Item"
>
<CreateItem
setDeleteModalIsOpen={setNewItemModalIsOpen}
/>
</Modal>
</div>
);
})}
</div>
</div>
);
};