Estoy usando React para un sitio web para un esquema de jardín abierto que organizo. Tengo un componente en el que puedes ver un jardín específico ( garden.js ) y sus imágenes asociadas. Presento estas imágenes como versiones más pequeñas del original.

Estoy creando un modal ( ImageModal.js ) que comienza cuando haces clic en una imagen y muestra el tamaño normal de esa imagen. Obtuve el modal en ejecución, pero no entiendo cómo obtener los datos de imagen correctos en ese modal.

Este es mi código (destripado) hasta ahora:

 ---------------------- Garden.js ---------------------- export default function Garden() { const [openImageModal, setOpenImageModal] = useState(false); //Removed: fetch the garden and image objects from the database, imports, css styling, etc return ( <div> <div> <h1>{garden.title}</h1> <div> { images.map((image) => ( <img src={image.image} //base64 encoded blob key={image.id} //id of the image in the db alt={garden.title} onClick={() => { setOpenImageModal(true); }} ></img> )) } </div> {openImageModal && <ImageModal closeImageModal={setOpenImageModal} />} </div> ); } ---------------------- ImageModal.js ---------------------- export default function ImageModal({ closeImageModal }) { return ( <div> <button onClick={() => closeImageModal(false)}>x</button> </div> <div> <img src={theProperImage}></img> </div> ); }

Así que mi pregunta es esta: ¿cómo obtengo {image.image} de una de las imágenes creadas por images.map en el modal para poder usarlo como (o en lugar de) {theProperImage} ?

Espero no haber olvidado nada que mencionar y gracias de antemano!