Today, I will show how to show records in Popup Box or Model Box in React. Display Records in Model Box in React.
Display API Records in Model Box in React
I am showing all records from this API link – https://jsonplaceholder.typicode.com/users
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 React, { useState,useEffect } from "react"
import ReactDOM from "react-dom"
function DataModel() {
// React Hooks declarations
const [records, setRecords] = useState([])
const loadData = () => {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => setRecords(data));
console.log(records)
}
useEffect(() => {
loadData();
},)
return (
<div class="container-fluid bg-primary">
<h2>REST API Data in Model Box using React</h2>
<p>Click on the button below to see it in action...</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<div class="modal" id="myModal" style={{backgroundColor:"white"}}>
<div class="modal-dialog" >
<div class="modal-content text-dark">
<div class="modal-header">
<h4 class="modal-title">REST API Records</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{records.map((user)=>
<tr>
<td>{user.name}</td>
<td>{user.username}</td>
<td>{user.email}</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 DataModel;
Now call the DataModel.js file in the App.js file
App.js
import React, { useState } from "react"
import ReactDOM from "react-dom"
import DataModel from './DataModel';
function App() {
return (
<div className="App">
<DataModel/>
</div>
)
}
export default App
Now run this project using npm start http://localhost:3000/
Subscribe to My Programming YouTube Channel Before Downloading the code :
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