Display Records in Model Box in React

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">&times;</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

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 *