How to filters result by search box in react js

In this article,we are going to make custom search box which have the ability of filtering record by keyword types in search box

Myinput.js file is displayed below:

1import "./styles.css";
2import React from "react";
3import "./styles.css";
4
5export default class Myinput extends React.Component {
6  onSearch = (event) => {
7    console.log("hllooolol", this.props);
8
9    const { onSearch } = this.props;
10    onSearch(event.target.value);
11  };
12  render() {
13    console.log("hihiihihihh");
14    const { searchTerm } = this.props;
15    return (
16      <>
17        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
18<div class="box">
19  <div class="container-2">
20      <span class="icon"><i class="fa fa-search"></i></span>
21      <input type="search" id="search" placeholder="Search..." onChange={(event)=>this.onSearch(event)} value={searchTerm} />
22  </div>
23</div>
24        
25       
26
27      </>
28    );
29  }
30}

Search.js file is displayed below

1import React, { Component } from "react";
2import { shows } from "./Data.json";
3import Myinput from "./input";
4import Show from "./display";
5
6class Search extends Component {
7  state = {
8    searchTerm: ""
9  };
10
11  onSearch = (searchTerm) => {
12    this.setState({ searchTerm });
13  };
14
15  render() {
16    const { searchTerm } = this.state;
17
18    return (
19      <div>
20        <Myinput searchTerm={searchTerm} onSearch={this.onSearch} />
21        {shows
22          .filter((show) =>
23            ${show.title} ${show.description}
24              .toUpperCase()
25              .includes(searchTerm.toUpperCase())
26          )
27          .map((show) => (
28            <Show key={show.imdbID} show={show} />
29          ))}
30      </div>
31    );
32  }
33}
34
35export default Search;

show.js file is displayed below

1import React from "react";
2
3const Show = ({ show }) => (
4  <div>
5    <h3>{show.title}</h3>
6    <h4>({show.year})</h4>
7    <p>{show.description}</p>
8  </div>
9);
10
11export default Show;

Data.json file is displayed below

1{
2  "shows": [
3    {
4      "title": "Atlanta",
5      "year": "2008–2013",
6      "description": "Two cousins, with different views on art versus commerce, on their way up through the Atlanta rap scene; "Earnest 'Earn' Marks," an ambitious college drop-out and his estranged cousin, who suddenly becomes a star.",
7      "poster": "a.jpg",
8      "imdbID": "tt4288182",
9      "trailer": "MpEdJ-mmTlY"
10    },
11    {
12      "title": "Billions",
13      "year": "2016–",
14      "description": "U.S. Attorney Chuck Rhoades goes after hedge fund king, Bobby "Axe" Axelrod in a battle between two powerful New York figures.",
15      "poster": "b.jpg",
16      "imdbID": "tt4270492",
17      "trailer": "_raEUMLL-ZI"
18    },
19    {
20      "title": "Black Mirror",
21      "year": "2011–",
22      "description": "A television anthology series that shows the dark side of life and technology.",
23      "poster": "bm.jpg",
24      "imdbID": "tt2085059",
25      "trailer": "jDiYGjp5iFg"
26    },
27    {
28      "title": "Breaking Bad",
29      "year": "2008–2013",
30      "description": "A high school chemistry teacher diagnosed with inoperable lung cancer turns to manufacturing and selling methamphetamine in order to secure his family's future.",
31      "poster": "bb.jpg",
32      "imdbID": "tt0903747",
33      "trailer": "XZ8daibM3AE"
34    },
35    {
36      "title": "Game of Thrones",
37      "year": "2011–",
38      "description": "Nine noble families fight for control over the mythical lands of Westeros, while a forgotten race returns after being dormant for thousands of years.",
39      "poster": "got.jpg",
40      "imdbID": "tt0944947",
41      "trailer": "giYeaKsXnsI"
42    }
43  ]
44}

Here is the link of live example which we done so far:
Click here