Estoy creando una lista de proyectos en los que se puede hacer clic, que cuando se hace clic muestra el proyecto en un modal con más detalles.

Creé un componente como este:

 const Projects = (props) => { const [modalOn, setModalOn] = useState(false); const handleOnOpen = () => setModalOn(true); const handleOnClose = () => setModalOn(false); return ( <div id="projects"> <ul key="1"> { props.children.map((data, index) => { return <li key={data.id} className="mx-2 rounded-lg border"> <div className="overflow-hidden cursor-pointer" onClick={ () => handleOnOpen }> <CoverRender>{data}</CoverRender> </div> <div className="px-4 pt-3"> <h1 className="font-bold">{data.name}</h1> <p>{data.description}</p> </div> </li> }) } </ul> <Modal onClose={handleOnClose} visible={modalOn} projectModalData={modalData}/> </div> ); }; export default Projects;

observe que la fuente de datos 'props' es una matriz simple que itera sobre cada proyecto que representa una lista, y que el componente Modal se llama al final, después de la iteración, ¿cómo puedo vincular un proyecto de la lista con la información correspondiente en el modal?

Ya intenté agregar una opción en onClick para pasar el valor de la fecha a ModalData, pero cuando hago clic en esta variable, no tiene valor.