0
193
Vistasreaccionar obtener datos y representarlos en un modal
Estoy tratando de obtener datos de una tabla en modal, obtuve una tabla y todos los datos se completaron bien, obtuve un botón al lado de cada fila donde me gustará que cuando haga clic en el botón muestre todos los datos del seleccionado fila. Logré obtener los datos con console.log, pero no puedo hacer que se represente en el modal. No tengo errores, pero aún así tampoco se muestra. Adjunto una imagen con lo que tengo. como tú en la consola. Obtengo la fila de selección
sitiopersonalizado.jsx
import React, { useState } from 'react'; import Modal from './reusable/modal'; import useFetchData from './hooks/useFetchData'; const Customsite = ()=> { const { data, loading, } = useFetchData(); const [display, openModal] = useState(false); const closeModal = () =>{ openModal(false); } const openedModal = () =>{ openModal(true); } const getAllData = (data) =>{ console.log(data); return data; } return( <div> <div className='conatiner'> <table className="table"> <thead> <tr> <th>id</th> <th>titel</th> <th>body</th> <th>actions</th> <th>details</th> </tr> </thead> <tbody> {data.map(posts =>( <tr key={posts.id}> <th>{posts.id}</th> <th>{posts.title}</th> <th>{posts.body}</th> <th><button className="btn btn-primary" onClick={()=> { getAllData(posts); openedModal();}}> button</button> </th> <th> <button className="btn btn-success">Success</button> </th> </tr> ))} </tbody> </table> <Modal isOpened={display} closeModal ={closeModal} > <h1>modal header</h1> <p>{getAllData}</p> </Modal> </div> </div> ) } export default Customsite
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Aquí getAllData es una función que contiene el valor de los datos, por lo que al llamar directamente dentro de la etiqueta <p> no imprimirá los datos.
import React, { useState } from 'react'; import Modal from './reusable/modal'; import useFetchData from './hooks/useFetchData'; const Customsite = ()=> { const { data, loading, } = useFetchData(); const [display, openModal] = useState(false); const [seletcedData, setSelectedData] = useState(); const closeModal = () =>{ openModal(false); } const openedModal = () =>{ openModal(true); } const getAllData = (data) =>{ console.log(data); setSelectedData(data); openedModal(); } return( <div> <div className='conatiner'> <table className="table"> <thead> <tr> <th>id</th> <th>titel</th> <th>body</th> <th>actions</th> <th>details</th> </tr> </thead> <tbody> {data.map(posts =>( <tr key={posts.id}> <th>{posts.id}</th> <th>{posts.title}</th> <th>{posts.body}</th> <th><button className="btn btn-primary" onClick={()=> { getAllData(posts);}}> button</button> </th> <th> <button className="btn btn-success">Success</button> </th> </tr> ))} </tbody> </table> {display && <Modal isOpened={display} closeModal ={closeModal} > <h1>modal header</h1> <p>{selectedData?.title}</p> </Modal> } </div> </div> ) } export default Customsite Aquí está la solución y puede crear múltiples etiquetas <p> para mostrar los datos requeridos.
·
Juan Pablo Isaza
Denunciar
0
hacer un estado para los datos
const [tableData, setTableData] = useState({})después de obtener datos:
const getAllData = (data) =>{ setTableData(data) console.log(data); }luego en Modal:
<Modal isOpened={display} closeModal ={closeModal} > <h1>{tableData.title}</h1> <p>{tableData.body}</p> </Modal>
·
Juan Pablo Isaza
Denunciar
0
Prueba así
import React, { useState } from "react"; import Modal from "./reusable/modal"; import useFetchData from "./hooks/useFetchData"; const Customsite = () => { const { data, loading } = useFetchData(); const [display, openModal] = useState(false); const [rowData, setRowData] = useState(); const closeModal = () => { openModal(false); }; const openedModal = () => { openModal(true); }; return ( <div> <div className="conatiner"> <table className="table"> <thead> <tr> <th>id</th> <th>titel</th> <th>body</th> <th>actions</th> <th>details</th> </tr> </thead> <tbody> {data.map((posts) => ( <tr key={posts.id}> <th>{posts.id}</th> <th>{posts.title}</th> <th>{posts.body}</th> <th> <button className="btn btn-primary" onClick={() => { setRowData(posts); openedModal(); }} > button </button> </th> <th> <button className="btn btn-success">Success</button> </th> </tr> ))} </tbody> </table> <Modal isOpened={display} closeModal={closeModal}> <div> <h1>modal header</h1> <table className="table"> <thead> <tr> <th>id</th> <th>titel</th> <th>body</th> </tr> </thead> <tbody> { <tr key={rowData?.id}> <th>{rowData?.id}</th> <th>{rowData?.title}</th> <th>{rowData?.body}</th> </tr> } </tbody> </table> </div> </Modal> </div> </div>); };
exportar sitio personalizado predeterminado;
·
Juan Pablo Isaza
Denunciar
Responde la pregunta