State Question React.js

Question

I have below jsfiddle. I am trying to filter out entries, so when a category is selected, I want to show results only for this category. Not sure if I went missing with states.

https://jsfiddle.net/kkhwabzr/

var App = React.createClass({
    render: function() {
        return (
        <div>
            <Instructions />
            <h1>Requests</h1>
        </div>
        );
    }
});

Answer 1

You need to track the selection status from the main component of the application. Right now you are tracking a selection in the MySelect component. This means that the App component does not have this information and cannot pass it to the DisplayRecords component as a support.

- , onChange MySelect:

getInitialState: function() {
    return { selected: "All Requests" }
},

onChange:function(e){
    this.setState({selected: e.target.value})
},

render: function() {
    return (...
        <MySelect selected={this.state.selected} onChange={this.onChange} />
        <DisplayRecords records={this.props.data.filter(this.filterRecord)}
    ...)
}

, , " ", , :

filterRecord: function(record) {
  if(this.state.selected === null) return true;
  return (record.status === this.state.selected || this.state.selected === "All Requests");
}

. jsfiddle : https://jsfiddle.net/kkhwabzr/3/

, , . , React ( TypeError) {value:...}, record.status .