Class extends React.Component can't use getInitialState in React

Question

I'm tring the ES6 syntax in React, and write the components like:

export default class Loginform extends React.Component {
    getInitialState() {
        return {
          name: '',
          password: ''
        };
    };
}

but the browser throws me a waring about:

Warning: getInitialState was defined on Loginform, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

I can handle it with the traditional syntax var Loginform = React.createClass but what's correct ES6 syntax?

Another little thing, I think in traditional syntax React.createClass is an object, so the functions in it is separated by comma, but with the extends class it require semicolon, I don't understand it well.

Possible duplicate of Why is getInitialState not being called for my React class? — Felix Kling
– Felix Kling, Commented Oct 31, 2015 at 3:43

max · Accepted Answer · 2015-10-31 01:42:04Z

150

You don't need semicolons or commas between ES6 class method declarations.

For ES6 classes, getInitialState has been deprecated in favor of declaring an initial state object in the constructor:

export default class Loginform extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      name: '',
      password: ''
    };
  };
}

answered Oct 31, 2015 at 1:42

max

6,0692 gold badges24 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Brick Yang Over a year ago

With this, when console.log(this.state.name), it throws an error about Cannot read property 'state' of null

max Over a year ago

Where are you trying to call it? In ES6 classes this is not automatically bound, which might be part of the problem: facebook.github.io/react/blog/2015/01/27/…

Con Antonakos Over a year ago

Quoting from the linked article: "One of the niceties provided by React's createClass functionality was that it automatically bound your methods to a component instance. For example, this meant that within a click callback this would be bound to the component. With the move to ES6 classes, we must handle this binding ourselves. The React team recommends prebinding in the constructor." newmediacampaigns.com/blog/…

Alexander Mills Over a year ago

I kinda liked it the way it was with ES5 - and getInitialState()

Juan Carlos Constantine · Accepted Answer · 2016-10-05 19:24:55Z

7

ES6 example: state, defaultProps, propTypes

import React from 'react'
import ReactDom from 'react-dom';
export default class Item extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            check:false,
        };
        this.click=this.click.bind(this);
    }
    click(){
       this.setState({check:true});
    }
    render(){
        const text=this.state.check?'yes':'no';
        return(<div onClick={this.click}>{this.props.name} : <b>{text}</b></div>)
    }

}

Item.defaultProps={
    comment:"default comment",
};
Item.propTypes={
    name:React.PropTypes.string.isRequired,
};

edited Oct 5, 2016 at 19:24

answered Oct 5, 2016 at 19:04

Juan Carlos Constantine

1241 silver badge5 bronze badges

Comments

lingjin.w · Accepted Answer · 2018-06-14 16:04:09Z

2

If we use class field, following is working.

state = {
      name: '',
      password: ''
}

This can be used instead of

constructor(props, context) {
    super(props, context);

    this.state = {
      name: '',
      password: ''
    };
  };

answered Jun 14, 2018 at 16:04

lingjin.w

1521 silver badge8 bronze badges

Collectives™ on Stack Overflow

Class extends React.Component can't use getInitialState in React

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related