ReactJS Two components communicating #2

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h2>
        Фильтр по списку
      </h2>
      <div id="container">
      </div>
    </div>
  </div>
</div>

CSS

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'

JavaScript 1.7

var Filter = React.createClass({

	handleFilterChange: function(e) {
    this.props.updateFilter(e.target.value);
  },
  
  render: function() {
  	return <input type="text" ref="filterInput" onChange={this.handleFilterChange} placeholder="фильтр" className="form-control" />;
  }
  
});

var List = React.createClass({   
  render: function() {
  
  	var content;
    console.log(this.props.items.length);
    if (this.props.items.length > 0) {
    	var items = this.props.items.map( function(item) {
      	return <li>{item}</li>;
      });
      content = <ul>{items}</ul>;
    } else {
    	content = <p>Нет совпадений</p>
    }
   
    return (
    	<div className='results'>
      	<h4>Результат</h4>
        {content}
      </div>
    );
  }  
});

var ListComponent = React.createClass({
	getInitialState: function() {
  	return {
      listItems: ['Chicago', 'New York', 'Tokyo', 'London', 'San Francisco', 'Amsterdam', 'Hong Kong'],
      nameFilter: ''
    };
  },
  
  handleFilterUpdate: function(filterValue) {
  	this.setState({
    	nameFilter: filterValue
    })
  },
  
  render: function() {
  	var displayedItems = this.state.listItems.filter(function(item) {
    	var match = item.toLowerCase().indexOf(this.state.nameFilter.toLowerCase());
      return (match !== -1);
    }.bind(this));
    
    return (
    	<div>
      	<Filter updateFilter={this.handleFilterUpdate} />
        <List items={displayedItems} />
      </div>
    )
  }
})

ReactDOM.render(
	<ListComponent />,
  document.getElementById('container')
)