# Step 4

At this point, you should have something that looks like this:

![Final product](https://366599030-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEGRfOxS6iFE8GUqpjc%2F-LEGRjwPuGTTScW_73Bs%2F-LEGRslC8KebKNHNpq_W%2Fintroduction-step4.png?generation=1528227402012767\&alt=media)

## Create `SearchField` component

Create a new component that will encapsulate the search field.

At this point, your `App`'s `render()` function should somehow look like:

```javascript
render () {
  return (
    <div>
      <Title>
        Product Page
      </Title>

      <SearchField />

      <ProductList products={products} />
    </div>
  );
}
```

## Filter the list

Now that you have everyting on the screen, you want to listen to the `onChange` event on the `<input>` and filter the list accordingly.

As we have seen in the [stateful components chapter](https://github.com/shopify/react/tree/2fb346599c5d7e9d0fed4b8351ed9d6c6cd8300e/Exercises/LightProductList/Introduction/2.%20Components/2.2%20-%20Stateful%20Components/README.md), to be able to share information between components you will have to lift your state up to your `App.js`

The steps here are the following:

* **Create an initial state**: To start, you will want to store an initial state in your `App.js`.

```javascript
  export default class App extends Component {
    state = {
      productName: '',
    }
  }
```

* **Store user input**: Create a handler `function` that you will pass to your `SearchField` that will update the state of your component

```javascript
  handleUserInput = (event) => {
    const productName = event.target.value;

    this.setState({productName});
  }

  render() {
    return (
      ...
      <SearchField onChange={this.handleUserInput} />
      ...
    )
  }
```

✨ If you are not familiar with this synthax: `yourFunction = (args) => {}`, this will bind automatically `this` to be the function. Therefor, when you will pass the function to the component, `yourFunction` will keep the correct context.

Now, in your `SearchField` component, you will want to execute this `onChange` callback. So you want to listen to the `onChange` callback of the `<input />` like:

```javascript
  render() {
    const {onChange} = this.props;

    return (
      ...
      <input onChange={onChange} />
      ...
    )
  }
```

Note that on each key stroke, the `onChange` event will be fired. (Events are normalized by React. Feel free to [learn more about React Synthetic events](https://facebook.github.io/react/docs/events.html) on their doc.) This means that on every keystroke, the state of `App.js` should be updated. To make sure everything is working properly, you can `console.log(this.state.productName)` in the `render()` function of `App.js`.

* **Filter the list**:

Now that you store what the user entered you can filter the list on each `render()` and pass an filtered list to the `ProductList` component.

Here is a naïve filtering function that you can use:

```javascript
// @items: Hash with key `title`
// @query: query with which the items will be filtered
function filterItems(items, query) {
  return items.filter(({title}) =>
    title.toLowerCase().includes(query.toLowerCase())
  );
}
```

Now in your `render()` function you can do something as easy as:

```javascript
  render() {
    const {productName} = this.state;
    const filteredProducts = filterItems(products, productName);

    return (
      <div>
        ...
        <ProductList products={filteredProducts} />
        ...
      </div>
    );
  }
```