title: ReactJS with ES6: this.props is not a function when I communicate two components
body: <p>I'm working with ReactJS with ES6, but I have some problems to communicate child > parent through props. Example of my approach:</p>
  
  <pre><code>class SearchBar extends React.Component {
    handler(e){
      this.props.filterUser(e.target.value);
    }
  
    render () {
    return &lt;div&gt;
      &lt;input type='text' className='from-control search-bar' placeholder='Search' onChange={this.handler} /&gt;
    &lt;/div&gt;
    }
  }
  
  
  export default class User extends React.Component {
    constructor(props) {
      super(props);
      this.state = {name: '', age: '', filter: ''};
    } 
  
    filterUser(filterValue){
      this.setState({
        filter: filterValue
      });
    }
  
    render() {
      return &lt;div&gt;
        &lt;SearchBar filterUser={this.filterUser} /&gt;
        &lt;span&gt;Value: {this.state.filter}&lt;/span&gt;
      &lt;/div&gt;
    }
  }
  </code></pre>
  
  <p>This returns <code>Uncaught TypeError: this.props.filterUser is not a function</code>.</p>
  
  <p>Any idea? Binding maybe?</p>
  
  <p><strong>[EDIT] Solution (Thanks @knowbody &amp; @Felipe Skinner):</strong></p>
  
  <p>I was missing binding in my constructor. Binding in the SearchBar constructor works perfectly.</p>
  
  <p>Using <code>React.createClass()</code> (ES5), it automatically does bindings to <code>this</code> for your functions. In ES6 you need bind <code>this</code> manually. More info <a href="https://facebook.github.io/react/docs/reusable-components.html#es6-classes" rel="noreferrer">https://facebook.github.io/react/docs/reusable-components.html#es6-classes</a></p>