Searching is one of the most important components of your web application. Let's take an example of an E-commerce platform where there are thousands of item on sale but to find the specific item you are looking for, you need to search 🔍 for the item using the search component provided by the platform.

Today we will learn to build a simple search form which searches from a list of data using react.

Setting up the project

For setting up your project, you can use either create-react-app or also you can go to CodeSandBox.
You can find an article on setting up your react project here.

After creating the project, at first, let's make a simple UI that has an input field and displays the list of search results.

Go to the index.js file which is at the root of your project and clean up all the code inside and add the following code.

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
      />
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  );
}

In the component above, we create a simple input form(which currently doesn't do anything) and a mock list of the results that are going to be displayed.

Now we apply two-way data binding to the input field, which basically takes the value from the user and saves it into the state.

import React from "react";
import ReactDOM from "react-dom";

function App() {
 const [searchTerm, setSearchTerm] = React.useState("");
  const handleChange = event => {
    setSearchTerm(event.target.value);
  };
  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  );
}

We have now created an state named searchTerm which saves the data from the search input on every occurance of the change event. The handleChange method takes the event object as the arguement and sets the current value of the form to the searchTerm state using setSearchTerm method provided by React.useState method.

Now we create a mock list of data and search the data based on the input provided by the user on the input box we created.

import React from "react";
import ReactDOM from "react-dom";

const people = [
  "Siri",
  "Alexa",
  "Google",
  "Facebook",
  "Twitter",
  "Linkedin",
  "Sinkedin"
];

function App() {
 const [searchTerm, setSearchTerm] = React.useState("");
 const [searchResults, setSearchResults] = React.useState([]);
 const handleChange = event => {
    setSearchTerm(event.target.value);
  };

  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  );
}

In the above code snippet, we create a mock list/array named people, from which we are going display the list in our component. We also create a state named searchResults which is used to set the search result.

Now we apply the search functionality to our component.

import React from "react";
import ReactDOM from "react-dom";

const people = [
  "Siri",
  "Alexa",
  "Google",
  "Facebook",
  "Twitter",
  "Linkedin",
  "Sinkedin"
];

function App() {
 const [searchTerm, setSearchTerm] = React.useState("");
 const [searchResults, setSearchResults] = React.useState([]);
 const handleChange = event => {
    setSearchTerm(event.target.value);
  };
 React.useEffect(() => {
    const results = people.filter(person =>
      person.toLowerCase().includes(searchTerm)
    );
    setSearchResults(results);
  }, [searchTerm]);

  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
         {searchResults.map(item => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Now in the above code snippet, React.useEffect hook is used which executes whenever the dependency of the method gets changed. The React.useEffect hook takes two arguments. The first argument is the function to execute when the data in the dependency is modified and the second argument is an array of dependencies the React.useEffect hook is dependent on. So whenever the value of the dependencies in the React.useEffect hook changes the function in its first argument executes.

So in the React.useEffect hook above, the dependency is searchTerm which gets changed on every input by the user which in turn executes the function in the first argument of the React.useEffect hook. The following function gets executed

() => {
    const results = people.filter(person =>
      person.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setSearchResults(results);
  }

In the above function, the filter method is applied to the people array which returns a new array according to the condition returned in every iteration. The condition is person.toLowerCase().includes(searchTerm.toLowerCase()) which means if the person in the people's list includes the searchTerm then return true otherwise return false.

After the filtered list is set on the searchResults state using the setSearchResult provided by React.useState hook.

Now we have set the search results to the state, we display it by using the searchResults.map method in our component which iterates over all the searchResults and renders them inside the ul.

  <ul>
     {searchResults.map(item => (
          <li>{item}</li>
     ))}
  </ul>

The final result looks something like this

You can find the completed code here

Thankyou.

You can also follow me on Twitter.