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

CodePudding user response：

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.

CodePudding user response：

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>

CodePudding user response：

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;