In this tutorial, you will learn how to create a simple search component built within ReactJS. The component will take a collection of data, passed in via props, allow a user to filter those results within a search bar and then finally render the results. The main purpose of this exercise is to teach you how to manage a collection of data being passed down into your component, how to move that data from props to state and then how to manage that data throughout the life-cycle of that component. If this sounds like a topic you would like to learn more about, then read on!

The Overview

To quickly outline what we want to achieve:

  • We need two properties to manage our components state:
    • One parameter will be needed to store the original list of search results.
    • One to store the results that have been filtered by the users' selection
  • Some code to move the data passed in as props into state using componentWillMount()
  • Some JSX to render the component
  • An event handler to take the user input, filter the collection and modify the state, forcing React to re-render the component

The Code

Below outlines the code required to build this component:

In the render() method there are two controls, the search box and some code that iterates through a collection.  An important thing to notice is occuinr on Line 32. part here is that we used state, rather than the prop being passed in.  One thing to note if you don't see anything being rendered when you are iterating through a collection using map() remember to include the return statement.  It's very easy to forget to add it.  When you render your application and scratch your head why nothing displays on the screen, you feel very foolish afterward.

To store the collection into state, we add code within componentWillMount(), this will get called after the initial render of the component.  Anytime a new prop gets passed in, this will be run.  In here I set two properties.  One called initialItems to store the original collection passed in.  This will be our source of truth for all the filtering we need to do.  The other one called 'items' will be used to store our filtered data.  This is the collection that we will render and the user will see it on screen.

On the search box, we attach an event handler when the component updated called filterList.  This code should be a little more familiar.  We get the full collection of data, use the text entered in the search box to filter the results.  We then save the newly created filtered data in the 'item' state.  When the items are saved in state, this will cause a re-render, and react will update the UI. To quickly complete the code, you would call the component like so:

Managing state and passing props around in a simple application is usually fairly easy to get your head around. In large applications, where you have data being composed with a complex component tree then things can become a little more complicated. The main thing to remember when filtering data within a component is that you will need to use state, rather than just passing everything down as props. Happy Coding 🤘