Why is getInitialState not being called for my React class?

Question

I'm using ES6 classes with Babel. I have a React component that looks like this:

import { Component } from 'react';  export default class MyReactComponent extends Component {   getInitialState() {     return {       foo: true,       bar: 'no'     };   }    render() {     return (       <div className="theFoo">         <span>{this.state.bar}</span>       </div>     );   } } 

It doesn't look like getInitialState is being called, because I'm getting this error: Cannot read property 'bar' of null.

Answer 1

The developers talk about ES6 class support in the Release Notes for v0.13.0. If you use an ES6 class that extends React.Component, then you should use a constructor() instead of getInitialState:

The API is mostly what you would expect, with the exception of getInitialState. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise getDefaultProps and propTypes are really just properties on the constructor.