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 ponents 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.

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 ponents 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.

• javascript
• reactjs

1 Answer 1

In the ContentList ponent, it should use this.props.filterText which will take the value of the input and pare to your data. When the input value is changed, React will re-render the ponent 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 mentNodes = 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'>
                {mentNodes}
            </div>
        )
    }
})