React: Convert React class to ES6 class error when use context

[bakso]

I have a Class A created by createClass, while after I transform it into a ES6 class, I caught an err:

//Original class code
var A = React.createClass({

  childContextTypes: {
       name: React.PropTypes.string
  },

  getChildContext: function() {
       return { name: "Jonas" };
  },

  render: function() {
       return <B />;
  }
});
// ES6 class
class A extends React.Component {
  childContextTypes: { 
    name: React.PropTypes.string
  },

  getChildContext () {
    return { name: "Jonas" };
  },

  render () {
    return <B />;
  }
}

May be something wrong in the childContextTypes defining method?

[andreypopp]

The correct way:

class A extends React.Component {
  getChildContext () {
    return { name: "Jonas" };
  }

  render () {
    return <B />;
  }
}

A.childContextTypes = { 
  name: React.PropTypes.string
};

Note that I removed comma after getChildContext method and moved childContextTypes to declare attribute on the component class.

[bakso]

@andreypopp Thank you, but only in this way? Is there a better way?

[andreypopp]

@iostalk if you are using Babel with "stage": 0 option then you can take advantage of static class property initializers:

class A extends React.Component {

  static childContextTypes = { 
    name: React.PropTypes.string
  };

  getChildContext () {
    return { name: "Jonas" };
  }

  render () {
    return <B />;
  }
}

[bakso]

@andreypopp Thank you very much!

[sophiebits]

Thanks, @andreypopp.

[oliviertassinari]

@andreypopp Side question from you example, does using the _static class option_ makes sense for the getChildContext method? I.e:

class A extends React.Component {

  static childContextTypes = { 
    name: React.PropTypes.string
  };

  static getChildContext () {
    return { name: "Jonas" };
  }

  render () {
    return <B />;
  }
}

-  getChildContext () {
+  static getChildContext () {

[brigand]

@oliviertassinari it needs to be a prototype method (non-static). It can also use state and props.

[oliviertassinari]

@brigand Right, it doesn't work with the static: http://www.webpackbin.com/4JKCVq7Cb. Thanks! (I was having issues with the class-methods-use-this rule of eslint)