How to search records in ReactJS

In this article, I am going to show you from scratch how to implement a searchable/filtered list of data in React.How to search records in ReactJS.

We will create a search form in ReactJS Using this form We can search any record. We will work in Functional Components, not class components. Read more about React JS https://reactjs.org/

So first install bootstrap for responsive form. To Install Bootstrap write this command npm install bootstrap or yarn add bootstrap

Watch Video Tutorial of this Project

We will not use any database for fetching records. We will use JSON SERVER . Please read more about JSON Server https://www.npmjs.com/package/json-server

{
  "products": [
    {
      "id": 1,
      "MovieName": "The Road Trick",
      "MoviePath": "p1.PNG",
	  "Video":"The_road_trick.mp4"
    },
    {
      "id": 2,
      "MovieName": "Wynonna Earp",
      "MoviePath": "p2.PNG",
	  "Video":"Wynonna.mp4"
    },
    {
      "id": 3,
      "MovieName": "The Balled of Hug",
      "MoviePath": "p3.PNG",
	  "Video":"The_road_trick.mp3"
    },
    {
      "id": 4,
      "MovieName": "Greys Anatomy",
      "MoviePath": "p4.PNG",
	  "Video":"The_road_trick.mp3"
    },
    {
      "id": 5,
      "MovieName": "Step up 2",
      "MoviePath": "p5.PNG",
	  "Video":"The_road_trick.mp3"
    },
    {
      "id": 6,
      "MovieName": "Liquid Science",
      "MoviePath": "p6.PNG",
	  "Video":"The_road_trick.mp3"
    },
    {
      "id": 7,
      "MovieName": "13 Reasons why",
      "MoviePath": "p7.PNG",
	  "Video":"The_road_trick.mp3"
    },
    {
      "id": 8,
      "MovieName": "The Stair Case",
      "MoviePath": "p8.PNG",
	  "Video":"The_road_trick.mp3"
    },
    {
      "id": 9,
      "MovieName": "The Vietnam War",
      "MoviePath": "p9.PNG",
	  "Video":"The_road_trick.mp3"
    },
    {
      "id": 10,
      "MovieName": "The Covenan",
      "MoviePath": "p10.PNG",
	  "Video":"The_road_trick.mp3"
    },
    {
      "id": 11,
      "MovieName": "Marcella",
      "MoviePath": "p11.PNG",
	  "Video":"The_road_trick.mp3"
    },
    {
      "id": 12,
      "MovieName": "Riverdale ",
      "MoviePath": "p12.PNG",
	  "Video":"The_road_trick.mp3"
    }
  
  ]
}

We will use Axios for data requests so install using npm install axios or yarn add axios . Axios is a popular, promise-based HTTP client that sports an easy-to-use API and can be used in both the browser and React.js.

We will use useState() and useEffect()

useState is a Hook (function) that allows you to have state variables in functional components.

useEffect do? By using this Hook, you tell React that your component needs to do something after render.

Now we will make a page named SearchRecord.js ( This is our main page )

SearchRecord.js

import 'bootstrap/dist/css/bootstrap.min.css';
import axios from 'axios';
import {useEffect,useState} from 'react';

function SearchRecord() {

    const[search,setSearch]=useState([]);
    const[record,setRecord]=useState([]);

    var i =1; // For Serial no increment

    // For loading reacord on Windoe Load
    const loadRecords = async () => {
      axios.get("http://localhost:3000/products")
        .then(response => {
          setSearch(response.data);
        });
      
    }
    useEffect(() => {
        loadRecords();
    }, []);

    
    // Search Item by Name
    const searchRecords = () =>
    {
        axios.get(`http://localhost:3000/products/?MovieName=${record}`)
        .then(response => {
          setSearch(response.data);
        });
    }
    

  return (
  <div class="container">
  <h4 className="text-center text-success mt-5"><b>Search Movie by Name</b></h4>
    <div class="input-group mb-4 mt-3">
     <div class="form-outline">
        <input type="text" id="form1" onChange={(e)=>setRecord(e.target.value)} class="form-control" placeholder="search record" style={{backgroundColor:"#ececec"}}/>
   </div>
   <button type="button" onClick={searchRecords} class="btn btn-success">
       Search Movie
   </button>
  </div>                   
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Sr.No</th>
        <th>Movie Name</th>
        <th>Movie Poster</th>
      </tr>
    </thead>
    <tbody>
      {search.map((name)=>
      <tr>
        <td>{i++}</td>  
        <td><h6>{name.MovieName}</h6></td>  
        <td><img class="img-fluid" src={"/images/" + name.MoviePath} style={{maxWidth:"10%"}}  alt=""/></td>  
      </tr>
      )}  

    </tbody>
  </table>
</div>

  );
}

export default SearchRecord;

Now call this file into App.js file

App.js

import './App.css';

import SearchData from './SearchRecord';

function App() {
  return (
    <div className="App">
       <SearchData />
    </div>
  );
}

export default App;

Now run this project in browser http://localhost:3001/ . I am using 3001 because JSON Server is using 3000

How to search records in ReactJS

Download the Source Code : Search Records in ReactJS

Leave a Reply Cancel reply