Question

0

How to Filter data collection in ReactJS

rated 0 times [ 5] [ 5] / answers: 1 / hits: 17183 / 9 Years ago, sat, june 6, 2015, 12:00:00

I'm new to ReactJS and I'm trying to figure out how it works.

I was playing with it a little in JsBin and I have successfully created some components to fetch data from an api... but, I felt a little confused when I've tried implement the code to filter that collection.

Here is the JsBin link that I was trying to implement the filter feature.

Could you help me to understand why it's not working? Thank you.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

irvingjamieb

Add To Favorites

Follow

Total Points: 743

Total Questions: 113

Total Answers: 128

Location: Suriname

Member since Sun, Jun 13, 2021

3 Years ago

answered 9 Years ago jensenb · Accepted Answer

In the ContentList component, it should use this.props.filterText which will take the value of the input and compare to your data. When the input value is changed, React will re-render the component which contains this.state.filterText. You can use map or filter method to filter it. Here is an example :

var ContentList = React.createClass({



    render: function() {

        var commentNodes = this.props.data.map(function(content) {

                 if(content.description === this.props.filterText){ <-- this makes the filter work !

                    return <ItemRow title={content.owner.login} body={content.description} slug={content.owner.avatar_url}></ItemRow>}

            })

        return (

            <div className='contentList'>

                {commentNodes}

            </div>

        )

    }

})