Quiero pasar mis datos enumerados con mapa a modal. Mis datos se ven así en la pantalla:
1 reloj de Juan
2 reloj Karrie
3 Karen mira... así
en forma de mesa. Todos los relojes son botones y cuando se hace clic en el botón, se abre el modal.
¿Cómo puedo mostrar mis datos en modal cuando hago clic en los botones?
<Modal show={showModal} onClose={() => setShowModal(false)} title="{}"> //modal component <iframe src="" height="315" width="560" frameborder="0" allowfullscreen="" /> </Modal> <div className={styles.card}> <div className={styles.content}> <table> <thead> <tr> <td>#</td> <td>Topic</td> <td>View</td> </tr> </thead> <tbody> {VIDEOS_DATA.data.map((item) => ( <tr key={item.id}> <td>{item.id}</td> <td>{item.topic}</td> <td> <a onClick={()=>setShowModal(true)}> <FiPlay size="1.5rem" color="#009688" /> Watch </a> </td> </tr> ))} </tbody> </table> </div> </div> </div>Sugiera tener un setter setIdShown. Que puede pasar a su función onClick para establecer la identificación del elemento que desea mostrar.
En el modal, puede tener un getter iDShown. Luego puede filtrar elementos por ID y mostrar los datos en el modal.