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">×</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
How to Highlight a Deleted Row in PHP
Display Selected Row record in Material UI Model Box using React