Simple search form in REACT using hooks 🔎.
Tags: javascript, beginners, react, tutorial
Published: 2019-09-14 06:52:49

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](http://codesandbox.io).
You can find an article on setting up your react project [here](https://github.com/facebook/create-react-app).

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.

```react
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.

```react
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.

```react
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.


```react
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


```javascript
() => {
    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`.

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

The final result looks something like this

![Result](https://thepracticaldev.s3.amazonaws.com/i/zmippbu3o2rm1n8dyoml.gif)


You can find the completed code [here](https://codesandbox.io/s/practical-nightingale-m2b5n)

Thankyou.


You can also follow me on [Twitter](https://twitter.com/asimdahall).