Re-usable base React component bind issue with ES6

Question

Created a base React component to inherit from:

import { Component } from 'react';

class BaseComponent extends Component {
    constructor(props) {
        super(props);
    }

    _bindProps(...methods) {
        return methods.map(method => this[method].bind(this))
    }
}

export default BaseComponent;

And my child component:

class SomeChild extends BaseComponent {

    constructor(props) {
        super(props);
    }

    foo() {

    }

    render() {
        const props = this._bindProps('foo');
        <Child {...props} />
    }
}

However, I receive Cannot read property 'bind' of undefined on the line return methods.map(method => this[method].bind(this)). How can I achieve this, ie. passing down methods from a parent component to a child, and when it's called from the child, have it's this value reference the parent component.

J. Mark Stevens · Answer 1 · 2015-11-30T22:47:14.030

0

class SomeChild extends BaseComponent {

    constructor(props) {
        super(props);
    }

    foo = () => {

    }

    render() {
        <Child foo={this.foo} />
    }
}

If your just doing the BaseComponent to bind(this) to methods and using es6 it would be simpler to just use arrow functions for your methods.

edited Nov 30 '15 at 22:47

answered Nov 30 '15 at 22:44

J. Mark Stevens

4,911
2
13
18

Yeah, I'm seeing that. How would I go about utilising arrow functions for this purpose? ie. passing methods down to a component – benhowdle89 Nov 30 '15 at 22:45
Do remember that arrow functions does not bind on the prototype. – Henrik Andersson Dec 01 '15 at 04:07

score 0 · Answer 2 · answered Nov 30 '15 at 22:54

Janaka is right about just using arrow functions, but also you've a problem with your _bindProps implementation. It returns an array of bound functions but you need to return a key/val object of properties. Updating your _bindProps definition to:

_bindProps(obj) {
  Object.keys(obj).forEach(k => obj[k] = obj[k].bind(this));
  return obj;
}

And calling it with an object does the trick:

class BaseComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  _bindProps(obj) {
    Object.keys(obj).forEach(k => obj[k] = obj[k].bind(this));
    return obj;
  }
}

class SomeChild extends BaseComponent {

  constructor(props) {
    super(props);
    this.name = 'Jack'
  }

  foo() {
    return this.name;
  }

  render() {
    const props = this._bindProps({
      foo: this.foo,
    });
    console.log('props', props);
    return <Child {...props} />
  }
}

You could tidy the above up a little but that does now do the right thing and if you call this.props.foo() in the child component you will get Jack returned back.

I'd be interested to know why you're doing this though? This isn't something I've typically had to do at any point.

I basically have two different "views" (forget MVC views, I mean literally views) for basically the same component. So I created two child components (for each "view") and then passed down all the callback methods from the 1 parent to the 2 children. The event handlers are added in the children, but they actually call methods in the parent — benhowdle89, Nov 30 '15 at 22:59

Re-usable base React component bind issue with ES6

2 Answers2

Linked