How to set initial state with using ES6 class in React?

Question

I have created the below class

class App extends Component{
     render() {
         return (
             <div className="app"></div>
         );
     }
}

How do i set initial state?
getInitialState() isn't working? what am i doing wrong?
The react docs are also not helping.

Answer 1

import React, { Component } from 'react';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: 'Hello World'
        };
    }
    render() {
        return (
            <div>
                {this.state.text}
            </div>
        );
    }
}

You may also want to check out this post about the difference between when to use a constructor and when to use getInitialState.

What is the difference between using constructor vs getInitialState in React / React Native?

Answer 2

There is also a shortcut of Jenna's great answer, which doesn't use constructor or this:

class App extends Component {
    state = {
        text: 'Hello World'
    };

    render() {
        return (
            <div>
                {this.state.text}
            </div>
        );
    }
}

A simplified example shows that the output is the same in both cases:

• Babel with constructor
• Babel without constructor

But if we extend a parent class, the transpiled output does differ, since the number of arguments in the constructor is unknown.