React app that receives data via an AJAX requests, display the data and makes it searchable I have recently started using React and wish to know if my code adheres to the React coding style, whether I am following the same approach towards solving any problem and is there any way I can make the code better.

var React = require('react');
var Bootstrap = require('react-bootstrap');
var xhr = require('superagent');
var Input = Bootstrap.Input;
var Panel = Bootstrap.Panel;

var Polls;
var View = React.createClass({
    getInitialState: function() {
        return {
            selectedPoll: '',
            query: ''
        };
    },
    componentDidMount: function() {
        var self = this;
        xhr.get('/polls').end(function(err, res) {
            if(err) {
                console.log(err);
            } else {
                Polls = res.body;
                if(self.isMounted()){
                    self.setState({
                        selectedPoll: res.body,
                        query: ''
                    });
                }
            }
        });
    },
    _onchange: function(value) {
        var result = [];
        (Polls).map(function(val) {
            if(val.uuid.toLowerCase().indexOf(value) !== -1 || val.question_text.toLowerCase().indexOf(value) !== -1) {
                result.push(val);
            }
        });
        this.setState({
            query: value,
            selectedPoll: result
        });
    },
    render:function() {
        return (
            &lt;div id="Container"&gt;
                &lt;div id="Sidebar"&gt;
                    &lt;SearchBar change={this._onchange} val={this.state.query} /&gt;
                        &lt;PollList data={this.state.selectedPoll} /&gt;
                &lt;/div&gt;
                &lt;div id="PollWindow"&gt;
                    &lt;PollView /&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        );
    }
});

var SearchBar = React.createClass({
    doSearch: function(e) {
        this.props.change(e.target.value.toLowerCase());
    },
    render: function() {
        return (
            &lt;Input type="text" value={this.props.val} onChange={this.doSearch} /&gt;
        )
    }
});

var PollList = React.createClass({
    render: function() {
        var arr = [];
        if(this.props.data !== ''){
            this.props.data.map(function(value) {
                var head = value.uuid;
                var body = value.question_text;
                arr.push(&lt;div key={head}&gt;&lt;Panel header={head} key={head}&gt;{body}&lt;/Panel&gt;&lt;/div&gt;);
            });
        }
        return (
            &lt;div&gt;{arr}&lt;/div&gt;
        );
    }   
});

var PollView = React.createClass({
    render: function() {
        return (
            &lt;p&gt;Dummy space&lt;/p&gt;
        );
    }
});

module.exports = View;
Looks pretty idomatic :) the one major thing you might want to do is make use of propTypes to more explicitly define your Component API's. PropTypes help set expections for what values should/can be.

For instance in SearchBar your doSearch() method looks like

this.props.change(e.target.value.toLowerCase());


There is an implicit assumption that onChange is never going to be null, and that it's a function. You can codify that (and guard against dumb mistakes) by adding

propTypes: {
  onChange: React.PropTypes.func.isRequired
}


alternatively you can leave off: isRequired and provide a default value for onChange (perhaps a noop function).

In PollList

this line is odd (you also do this in _onChange of View):

this.props.data.map(function(value) {
   var head = value.uuid;
   var body = value.question_text;
   arr.push(&lt;div key={head}&gt;&lt;Panel header={head} key={head}&gt;{body}&lt;/Panel&gt;&lt;/div&gt;);
});


.map() already returns a new array so there is no need to push into the arr either just return the child elements or use a forEach()