React, "this", cloneElement and es6

ecmascript-6, javascript, reactjs

Solution

The autobinding that `React.createClass` did feature was removed for ES6 classes (see also this article). So you'll have to do it manually now:

…
  content: function() {
    return React.Children.map(this.props.children, function(child) {
     return React.cloneElement(child, {
       passThisFunc: this.passThisFunc.bind(this)
     })
    }.bind(this));
  },
…

But you wouldn't really do this in ES6. Rather, you'd use an arrow function in the first place, which features a lexical `this` binding:

class Parent extends React.Component {
  constructor() {
    super();
    this.passthisfunc = (component) => {
      // returns the parent
      console.log(this);

      // Returns the component so I can do component.props.name
      console.log(component);
    };
  }
  content() {
    return React.Children.map(this.props.children, child =>
      React.cloneElement(child, {
        passThisFunc: this.passThisFunc
      });
    );
  }
  …
}

Problem

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 `this` references the child component and not the parent. 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. I just want to write it in ES6 because everything else is but this has stumped me. This is my component in ES5: ``` 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 ( <div> { this.content } </div> ) } }); ``` And then in its children: ``` var Child = React.createClass({ componentDidMount: function() { this.props.passThisFunc(this); } render: function()..... }); ``` The components are not that different in ES6, it is really what is referenced when `this` is logged. Any help in refactoring (especially the parent component) would be greatly appreciated. Edit Here is the ES6 Example I tried: ``` 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 ( <div> { this.content } </div> ) } }; class Child extends React.Component { componentDidMount() { this.props.passThisFunc(this); } render(){...} }; ```

Original source