javascript - React, "this", cloneElement and es6 - Stack Overflow

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(){...}
};

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(){...}
};

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow edited Aug 5, 2015 at 20:51 Riley Bracken asked Aug 5, 2015 at 20:10 Riley BrackenRiley Bracken 6,37922 gold badges1818 silver badges1717 bronze badges 13

• Can you please fix the syntax errors in content? – Bergi Commented Aug 5, 2015 at 20:19
• ES6 doesn't change anything about how this works. What value did you expect for this if not child.props? – Bergi Commented Aug 5, 2015 at 20:21
• What I have in content is essentially the same as what I have in my current implementation and it works just fine, what are the syntax errors? Also on your second question I want to do something like: this.setState({ test: 'test' }) So I guess I expect it to be this to equal the parent component in like it does in ES5. – Riley Bracken Commented Aug 5, 2015 at 20:32
• The .map( call misses its closing parenthesis, and in that object literal you're passing to React.createClass({…}) the first property is delimited with ; instead of a comma, and the second misses the comma completely. – Bergi Commented Aug 5, 2015 at 20:36
• Good call, thanks. It is updated. – Riley Bracken Commented Aug 5, 2015 at 20:38

 |  Show 8 more comments

1 Answer 1

Sorted by: Reset to default 17

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
      });
    );
  }
  …
}