How to filter data collection in ReactJS

Question

I am new to ReactJS and I am trying to understand how this works.

I played with him a bit in JsBin, and I successfully created some components for extracting data from api ... but I was a little confused when I tried to implement code to filter this collection .

Here is the JsBin link in which I tried to implement a filter function.

Could you help me understand why it does not work? Thanks.

Answer 1

In the ContentList component ContentList it should use this.props.filterText , which will take an input value and compare with your data. When the input value changes, React will redisplay the component containing this.state.filterText . You can use the 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> ) } })