Using Filter in React
The purpose of this guide is to explore two different approaches to creating a dropdown that will filter data according to user input. In this example, we will be filtering movies by genre in a React app.
- Create a Filter component
The first step is to create the component that will be responsible for filtering the data. This component will contain the filter form.
It is very important that the form contains an “All” option. This will make it convenient for the user to apply the filter while maintaining the ability to access the unfiltered list.
2. Import the filter component in your App component.
2. Set the initial state inside of the Filter component’s parent component. In this example, that component would be App. The initial state will be set to “All” because, when the user first engages the app, none of the filters will be applied and ALL of the movies will be displayed.
3. In your parent component, write a function that will update the state of filter to reflect the user’s selection
4. Pass the function to the appropriate component as props. Remember to use the “this” keyword when dealing with class components.
5. Attach the function to the onChange event listener wherever the user input is occurring. Since this example features a dropdown, the function must be attached to the <select> tag. If we were working with a radio, the function would be attached to each <input> tag.
Note: We must pass the appropriate data as an argument to the update filter function. In this case, that would be the data that contains the user’s input: e.target.value
like this:
updateFilter’s argument contains the user input, which we have captured in e.target.value.
not like this:
this version of updateFilter is missing its argument and will do no good. The user input must be passed to the parent component via the argument. As you will soon see, we need that information to change state and trigger a re render.
6. Now, when the filter is selected by the user from the dropdown, it will trigger the event listener which will call the update filter function, which will update the state in the parent component. Changes to state trigger a re render. It’s time to write a function in that parent component that will directly determine which data is rendered. The function’s job will be to capture the change we wish to make to the data that is displayed. We will be passing the return value of our function down to the component that is responsible for rendering the thing we are trying to render. In this example, we are trying to render movies, but more specifically we are trying to render only the type of movies which the user has selected from the dropdown.
This function creates a copy of the original allMovies array of movie objects and stores it in the variable displayMovies. The copy is a safe place for us to manipulate the data without affecting our original allMovies array. In our copy, we check to see if filter’s state is equal to “All”. If it is not equal to “All”, that means the user has selected a different genre of movie, resulting in a state change. In that case, we are filtering through our copy and returning only elements who’s genre matches the filter that was selected. We are able to achieve this by using the javascript array method “.filter”. Filter iterates through an array and subjects each element to a test contained in the function. If the element passes the test, it is added to the new array. If the element fails the test, it is omitted from the new array. In this example, each movie object is being tested to determine if its genre key points to a value which is equal to the value of filter in state. Only movies which meet that criteria will be returned in the new array. After we have defined the variable displayMovies, we return it. When displayMovies is called, it will either return all of the movies or the filtered movies depending on the current state within the App component.
8.Finally, we need to call this function wherever we are passing down our thing to be rendered (in this case, it’s movies).
It is essential that we include the parenthesis that invoke the function. Our goal is to pass down the return value of the function(which is our filtered list of movies) NOT the function itself. The code below would only pass the function as props which, in this case, is NOT what we want.
The MovieContainer component will use these props to render all of the movies
Remember the “this” keyword is used because, in this example, the movie container is a class component. If it were a functional component, “this” must be omitted.
9. Pat yourself on the back
You just built a dropdown that filters your data according to the user’s selection! If this approach did not seem intuitive to you, you may prefer the bottom up approach:
In the bottom up approach, the first step is the same
- Create your filter component. This is where you will write the form for the dropdown menu. Remember to create an “All” option.
Here’s where the two approaches differ in sequence:
2.Inside of your Filter component, attach the onChange event listener to the select tag of your dropdown form
3.Pass the user input(captured in e.target.value) as an argument to the function associated with your event listener.
4.Trace your steps back to the parent component and pass the function as props
5.Inside of the parent component, define the function which you have passed to the Filter component as props
6.Set the state which is referenced inside of the function you just created
7.Write the function which filters the data according to the value set in the state you just defined
8.Pass that function’s return value as props to the component responsible for rendering the thing to be rendered. In this example, that would be movies.
Here’s a look at the code in its entirety
I hope this helps, and, as always, Happy Coding!
