How to filter list with input text – react-redux example
filter
7
react
38
redux
30
Male avatar

loveprogramming viết ngày 21/05/2021

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.

react-redux-example-filter-list-goal

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

545 bài viết.
97 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 11 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 9 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 9 tháng trước
1 0
Bài viết liên quan
Male avatar
0 0
https://grokonez.com/kotlin/kotlinfiltermapexamples Kotlin – filter() map examples In the tutorial, JavaSampleApproach will show you how to filte...
loveprogramming viết 5 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!