On Row click Display Record in Model Box in React

Today, I will show how to show records in Popup Box or Model Box in React. On Row click Display Record in Model Box in React.

I am showing all records from this API link – https://jsonplaceholder.typicode.com/users

Display API Records in Model Box in React

I am using Bootstrap Model box, You can use Material UI Model Box or Popup Box. I am using Bootstrap CDN links

public/index.html

 <link rel="stylesheet" href="https://bootswatch.com/4/cyborg/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

But You should install bootstrap in your system using the below commands

npm install bootstrap –save

You can install using yarn Package Installer

yarn add react-bootstrap bootstrap

Now create a page inside the src folder for your Model Box component. The file name is DataModel.js You can name it according to your choice. I am using the use effect to load and Map() function is showing all records in JSX.

src/DataModel.js

import {useEffect,useState} from 'react';

const Dashboard = () => {
  
  const[record,setRecord] = useState([])
  const [modeldata,setModeldata] = useState({
     id:'',
     userName:'',
     username:'',
     email:'',
     website:''
  })

   const getData = () =>
   {
       fetch('https://jsonplaceholder.typicode.com/users/')
       .then(resposne=> resposne.json())
       .then(res=>setRecord(res))
   }

   useEffect(() => {
      getData();
   },[])
  
    const showDetail = (id) =>
    {
     
      fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
      .then(resposne=> resposne.json())
      .then(res=>setModeldata(res))
    }


    return (
    <div class="container mt-2">
        <div class="row mt-2 ">
            <div class="col-lg-1 col-md-6 col-sm-12">
            </div>  
            <div class="col-lg-11 col-md-6 col-sm-12">
              <h5 class="mt-3 mb-3 text-secondary">
               Check More Records of Employees
              </h5>
                <div class=" mt-5">
                    <table class="table table-striped table-sm">
                        <thead class="thead-light">
                            <tr>
                                <th>No</th>
                                <th>Name</th>
                                <th>Username</th>
                                <th>Email</th>
                                <th>Website</th>
                                <th>Show Details</th>
                            </tr>
                        </thead>
                        <tbody>
                       
                          {record.map((names,index)=>
                           <tr key={index}>
                               <td>{names.id}</td>
                              <td>{names.name}</td>
                              <td>{names.username}</td>
                              <td>{names.email}</td>
                              <td>{names.website}</td>
                              <td><button class="btn btn-primary" onClick={(e)=>showDetail(names.id)} data-toggle="modal" data-target="#myModal">Get Details</button></td>
                           </tr>
                           )}
                        </tbody>
                    </table>
                </div>
            </div>
           
        </div>


{/* 
 Model Box  */}

      <div class="modal" id="myModal">
        <div class="modal-dialog" style={{width:"700px"}}>
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Row No : {modeldata.id}</h4>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            
            <div class="modal-body">
            <table class="table table-striped table-sm">
                        <thead class="thead-light">
                            <tr>
                                <th>No</th>
                                <th>Name</th>
                                <th>Username</th>
                                <th>Email</th>
                                <th>Website</th>
                              
                            </tr>
                        </thead>
                        <tbody>
                           <tr >
                              <td>{modeldata.id}</td>
                              <td>{modeldata.name}</td>
                              <td>{modeldata.username}</td>
                              <td>{modeldata.email}</td>
                              <td>{modeldata.website}</td>
                              
                           </tr>
                         
                        </tbody>
                    </table>
            </div>
            
            
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
            
          </div>
        </div>
      </div>

    </div>
    )
}


export default Dashboard


Now run this project using npm start http://localhost:3000/

Subscribe to My Programming YouTube Channel Before Downloading the code :

Download the Source code: https://drive.google.com/file/d/1xmCNdJSluexK9Vm6IJfleFtChotlQHpS/view?usp=sharing

See our More Project in React and Node

Responsive Navbar in Material UI React

Image Crop in React JS

How to Highlight a Deleted Row in PHP

Display Selected Row record in Material UI Model Box using React

Leave a Reply

Your email address will not be published. Required fields are marked *