How to filter list with input text – react-redux example

We have created a React Application that connects with Redux. In this tutorial, we’re gonna filter list of items with input text using react-redux.

Example Overview

We will build a React Application that has input text to look up for filtering items.
The filter works and updates every time we type in the textbox.


Filter list with input text


Remember that our App state is like this:

And our Book list is displayed based on getVisibleBooks() function:

getVisibleBooks(books, filters) returns Book list by filtering and sorting input books.

=> Updating filters state will change the list of displayed item (books).


In this example, we only update filters.text. To do this, we need:
– input text box to receive characters => create BookFilters Component that has html input.
– to connect BookFilters Component with Redux store to get access to filters state => import react-redux connect() and use mapStateToProps.
– to update result every time characters are typed => add onChange event and use Redux dispatch() with filterText Action imported from actions/filters.


Create BookFilters Component

Inside components folder, create BookFilters.js:

Add BookFilters to its parent Component


Run and Check Result

Check Result


Source Code


For running:
yarn install
yarn run dev-server or yarn run build, then yarn run serve.

More Practice

Year Filters




Source Code


By grokonez | April 17, 2018.

Related Posts

3 thoughts on “How to filter list with input text – react-redux example”

Got Something To Say:

Your email address will not be published. Required fields are marked *