Learning React.js: State and Re-render

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

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 LogTable = React.createClass({

    render: function() {

        var rows = [];
      
        this.props.projects.forEach(function(project) {

            if (project.title.toLowerCase().indexOf(this.props.filterText.toLowerCase()) === -1) {
                return;
            }
            rows.push(<LogRow key={project.id} project={project} />);
        }, this);

        return (
            <div>{rows}</div>
        );
    }

})

var LogRow = React.createClass({

    getInitialState: function()...