# Create an easy search filter in React

Often you want search functionality in your React app. Here is a simple way to implement this using `filter()` and `includes()` array methods along with the `useState` Hook.

Firstly here is the boiler plate code that simply displays a list of dogs with no search functionality. The state is a hard coded array of objects called _doggos_.

```javascript
import React, { useState } from "react"
import "./styles.css"

export const App = () => {
  const [doggos] = useState([
    { name: "Spike" },
    { name: "Winston" },
    { name: "Shandy" },
    { name: "Fluffy" },
  ])

  return (
    <div className="App">
      <ul>
        {doggos.map(dog => (
          <li>{dog.name}</li>
        ))}
      </ul>
    </div>
  )
}
export default App
```

The resulting application for my example is a very basic list and search input. That displays all dogs until user types. Once typed only dogs containing those letters will display.

![Result](https://dev-to-uploads.s3.amazonaws.com/i/70w5xy3tsssnjkf3oocs.png)

- Next we need to add some state for filtering as an empty string

```javascript
const [doggos] = useState([
  { name: "Spike" },
  { name: "Winston" },
  { name: "Shandy" },
  { name: "Fluffy" },
])
const [dogFilter, setDogFilter] = useState("")
```

- Then add an an input with a `onChange` event in out App

```javascript
    <div className="App">
      <input
        aria-label="Search"
        placeholder="Type to search..."
        type="text"
        onChange={handleSearchInput}
      />
```

We have stated we call `handleSearchInput` on an `onChange`**event** so next we must create that function

```javascript
const handleSearchInput = event => {
  setDogFilter(event.target.value)
}
```

The above code takes an event and the `setDogFilter` is used to set the state of `dogFilter` to what is being typed. Adding a `console.log(event.value.target)` is a good idea to see for yourself.

- Next create a function which **filters** through _doggos_ state and returns the _name_ that matches what is being types.

```javascript
const filteredDogs = doggos.filter(dog =>
  dog.name.toLowerCase().includes(dogFilter.toLowerCase())
)
```

You can see I have used the `includes()` array method.

- The includes() method determines whether an array includes a certain value among its entries, returning true or false.

`toLowerCase()` is used because capital letters don't matter in this instance.

- Now simply **map** over `filteredDogs` instead of `doggos`

```javascript
<ul>
  {filteredDogs.map(dog => (
    <li>{dog.name}</li>
  ))}
</ul>
```

### Summary 

There we have it. A simple search functionality in React using Hooks and some JavaScript array methods. 
I'll include the final code below.

### The Final Code

```javascript
import React, { useState } from "react"
import "./styles.css"

export const App = () => {
  const [doggos] = useState([
    { name: "Spike" },
    { name: "Winston" },
    { name: "Shandy" },
    { name: "Fluffy" },
  ])
  const [dogFilter, setDogFilter] = useState("")

  const handleSearchInput = event => {
    setDogFilter(event.target.value)
  }

  const filteredDogs = doggos.filter(dog =>
    dog.name.toLowerCase().includes(dogFilter.toLowerCase())
  )
  return (
    <div className="App">
      <input
        aria-label="Search"
        placeholder="Type to search..."
        type="text"
        onChange={handleSearchInput}
      />
      <ul>
        {filteredDogs.map(dog => (
          <li>{dog.name}</li>
        ))}
      </ul>
    </div>
  )
}
export default App
```
## Let's connect
[Twitter](https://twitter.com/davidbell_space)