1
\$\begingroup\$

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;
\$\endgroup\$
1
  • \$\begingroup\$ Welcome to CodeReview, 01bit. Hope you enjoy the site. \$\endgroup\$
    – Legato
    Apr 6, 2015 at 2:53

1 Answer 1

1
\$\begingroup\$

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

\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.