How to Filter data collection in ReactJS

Question

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.

Phi Nguyen Phi Nguyen · Accepted Answer · 2015-06-06T13:11:45

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>
        )
    }
})

How to Filter data collection in ReactJS

1 Answers