0
192
Vistasreact get data and render it in a modal
I'm trying to get data of a table to modal, I got a table and all data are populated just fine, I got a button next to each row where I will like that when I click the button I display all data from the selected row. I got to manage to get the data with console.log, but I cannot get it to render in the modal. I got no errors but still it doesn't show either. I've attached an image with what i got. as you in the console. I get the select row
customsite.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
Here getAllData is a function that holds the value of the data so by directly calling that inside the <p> tag it will not print the data.
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
Here is the solution and you can create multiple <p> tags to display the required data.
·
Juan Pablo Isaza
Denunciar
0
make a state for data
const [tableData, setTableData] = useState({})
after fetching data :
const getAllData = (data) =>{
setTableData(data)
console.log(data);
}
then on Modal:
<Modal isOpened={display}
closeModal ={closeModal} >
<h1>{tableData.title}</h1>
<p>{tableData.body}</p>
</Modal>
·
Juan Pablo Isaza
Denunciar
0
Try like this
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>
); };
export default Customsite;
·
Juan Pablo Isaza
Denunciar
Responde la pregunta