title: React, "this", cloneElement and es6
body: <p>I am wondering how ES6 and cloneElement works when you pass it a function. I need to reference state in the parent component's state but <code>this</code> references the child component and not the parent. </p>
  
  <p>Below is the code in regular JavaScript to make it work, after first writing it in ES6 and banging my head on the keyboard I decided to see if it was ES6 so I refactored and it works just fine. </p>
  
  <p>I just want to write it in ES6 because everything else is but this has stumped me.</p>
  
  <p>This is my component in ES5:</p>
  
  <pre><code>var Parent = React.createClass({
    content: function() {
      return React.Children.map(this.props.children, function(child) {
       return React.cloneElement(child, {
         passThisFunc: this.passThisFunc
       })
      }.bind(this));
    },
  
    passthisfunc: function(component) {
      // returns the components props
      console.log(this);
  
      // Returns the component so I can do component.props.name
      console.log(component);
    },
  
    render: function() {
      return (
        &lt;div&gt;
          { this.content }
        &lt;/div&gt;
      )
    }
  });
  </code></pre>
  
  <p>And then in its children:</p>
  
  <pre><code>var Child = React.createClass({
    componentDidMount: function() {
      this.props.passThisFunc(this);
    }
  
    render: function().....
  });
  </code></pre>
  
  <p>The components are not that different in ES6, it is really what is referenced when <code>this</code> is logged.</p>
  
  <p>Any help in refactoring (especially the parent component) would be greatly appreciated.</p>
  
  <p><strong>Edit</strong>
  Here is the ES6 Example I tried:</p>
  
  <pre><code>class Parent extends React.Component {
    content() {
      return React.Children.map(this.props.children, function(child) {
       return React.cloneElement(child, {
         passThisFunc: this.passThisFunc
       })
      }.bind(this));
    }
  
    passthisfunc(component) {
      // returns the components props
      console.log(this);
  
      // Returns the component so I can do component.props.name
      console.log(component);
    }
  
    render() {
      return (
        &lt;div&gt;
          { this.content }
        &lt;/div&gt;
      )
    }
  };
  
  class Child extends React.Component {
    componentDidMount() {
      this.props.passThisFunc(this);
    }
  
    render(){...}
  };
  </code></pre>