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

https://grokonez.com/frontend/react/how-to-filter-list-react-redux-example

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

Context

Remember that our App state is like this:

const demoState = {
    books: [
        {
            id: '123abcdefghiklmn',
            title: 'Origin',
            description: 'Origin thrusts Robert Langdon into the dangerous intersection of humankind’s two most enduring questions.',
            author: 'Dan Brown',
            published: 2017
        }
    ],
    filters: {
        text: 'ori',
        sortBy: 'published', // published or title
        startYear: undefined,
        endYear: undefined
    }
};

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

// BookList.js
const BookList = (props) => (
    // display 'books'
);

const mapStateToProps = (state) => {
    return {
        books: getVisibleBooks(state.books, state.filters)
    };
}

export default connect(mapStateToProps)(BookList);

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

More at:

https://grokonez.com/frontend/react/how-to-filter-list-react-redux-example

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