Learning React.js: State and Re-render

by manoj

HTML

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://fb.me/react-with-addons-0.12.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div class="container">
    <div class="row">
        <div id="worklog" class="col-md-12">
        </div>
    </div>
</div>

JavaScript 1.7

/* Convert seconds input to hh:mm:ss */
Number.prototype.toHHMMSS = function () {
    var sec_num = parseInt(this, 10);
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    var time    = hours+':'+minutes+':'+seconds;
    return time;
}

var PROJECTS = [
              {id: "1", title: "Project ABC"},
              {id: "2", title: "Project XYZ"},
              {id: "3", title: "Project ACME"},
              {id: "4", title: "Project BB"},
              {id: "5", title: "Admin"}
            ];

var Worklog = React.createClass({

    getInitialState: function() {
        return {
            filterText: '',
        };
    },

    handleSearch: function(filterText) {
        this.setState({
            filterText: filterText,
        });
    },

    render: function() {

        var propsSearchBar = {
            filterText: this.state.filterText,
            onSearch: this.handleSearch
        };

        var propsLogTable = {
            filterText: this.state.filterText,
            projects: this.props.projects
        }

        return (
            <div>
                <h2>Worklog</h2>
                <SearchBar {...propsSearchBar} />
                <LogTable {...propsLogTable} />
            </div>
        );
    }
});

var SearchBar = React.createClass({

    handleSearch: function() {
        this.props.onSearch(
            this.refs.filterTextInput.getDOMNode().value
        );
    },

    render: function() {

        return (
            <div className="form-group">
                <input type="text" className="form-control" placeholder="Search for a project..." value={this.props.filterText} onChange={this.handleSearch} ref="filterTextInput" />
            </div>
        );
    }

})

var...