Estoy tratando de mostrar una ventana modal cuando un usuario hace clic en un producto para obtener más detalles. Creé un componente modal que está oculto de forma predeterminada, y al hacer clic en el producto se activa una función que hace que el modal sea visible y le da los accesorios de nombre, precio del producto, etc. Sin embargo, solo obtengo un modal vacío.

Envase:

 const Product = ({ imgUrl, nameUrl, priceUrl, id }) => { const [title, setTitle] = useState(""); const [productId, setProductId] = useState(""); const [price, setPrice] = useState(""); const [img, setImg] = useState(""); const [modalClassName, setModalClassName] = useState("hidden"); const renderModalProduct = () => { setTitle(nameUrl); setPrice(priceUrl); setImg(imgUrl); setModalClassName("visible"); }; return ( <div className="product"> <div className="img-container"> <img src={imgUrl} alt="product image" onClick={renderModalProduct} /> </div> <div className="product-description"> <p>{nameUrl}</p> <p>€ {priceUrl}</p> </div> <div className="button-container"> <AddShoppingCartIcon className="btn" data-tip="Add to cart" /> <FavoriteBorderIcon className="btn" data-tip="Add to Favorites" /> {/* <ZoomInIcon className="btn" /> */} </div> <ReactTooltip type="light" border="true" borderColor="grey" /> <ModalProduct imgUrl={imgUrl} nameUrl={nameUrl} priceUrl={priceUrl} id={id} modalClassName={modalClassName} /> </div> ); };

Componente modal:

 const ModalProduct = ({ title, productId, price, img, modalClassName }) => { return ( <div className={`${modalClassName} modal-product`}> <p>{title}</p> <img src={img} alt="" /> <p>{price}</p> </div> ); };

¿Algunas ideas? ¡Gracias!