> For the complete documentation index, see [llms.txt](https://shopify-1.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shopify-1.gitbook.io/react/exercises/1.-productlist-light/step-4.md).

# Step 4

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

![Final product](/files/-LEGRslC8KebKNHNpq_W)

## 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>
    );
  }
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shopify-1.gitbook.io/react/exercises/1.-productlist-light/step-4.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.