React app that receives data via an AJAX requests, display the data and makes it searchable

Question

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 (
 <div id="Container">
 <div id="Sidebar">
 <SearchBar change={this._onchange} val={this.state.query} />
 <PollList data={this.state.selectedPoll} />
 </div>
 <div id="PollWindow">
 <PollView />
 </div>
 </div>
 );
 }
});
var SearchBar = React.createClass({
 doSearch: function(e) {
 this.props.change(e.target.value.toLowerCase());
 },
 render: function() {
 return (
 <Input type="text" value={this.props.val} onChange={this.doSearch} />
 )
 }
});
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(<div key={head}><Panel header={head} key={head}>{body}</Panel></div>);
 });
 }
 return (
 <div>{arr}</div>
 );
 } 
});
var PollView = React.createClass({
 render: function() {
 return (
 <p>Dummy space</p>
 );
 }
});
module.exports = View;

• Legato: Welcome to CodeReview, 01bit. Hope you enjoy the site.

Answer 1

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(<div key={head}><Panel header={head} key={head}>{body}</Panel></div>);
});

.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()