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