0

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>
    );
};

1 respuesta 1

0

No sé cómo no me di cuenta antes, la mejor manera es extraer todo lo que regresa el .map() en un nuevo componente, por eje , pasarlo por props el item y manejar todos los estados del modal en dicho componente, de esa forma solo se activa el modal en el que se dio clic.

De esta forma:

const ItemComponent = ({item}) => {
    const [deleteModalIsOpen, setDeleteModalIsOpen] = useState(false);
    const [itemInfoModalIsOpen, setItemInfoModalIsOpen] = useState(false);

    function openModal(modalName: string) {
        switch (modalName) {
            case "delete": {
                setDeleteModalIsOpen(true);
                break;
            }
            case "info": {
                setItemInfoModalIsOpen(true);
                break;
            }
        }
    }

    function closeModal(modalName: string) {
        switch (modalName) {
            case "delete": {
                setDeleteModalIsOpen(false);
                break;
            }
            case "info": {
                setItemInfoModalIsOpen(false);
                break;
            }
        }
    }


  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>
}

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.