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.

check react doc How to set initial state in es-6 class component — Mayank Shukla
– Mayank Shukla, Commented Oct 12, 2017 at 16:43
Also see: stackoverflow.com/q/37782403/1531971 This looks like a duplicate. — user1531971
– user1531971, Commented Oct 12, 2017 at 17:25
Possible duplicate of set initial react component state in constructor or componentWillMount? — Angel Cuenca
– Angel Cuenca, Commented Oct 12, 2017 at 21:31

joeytwiddle · Accepted Answer · 2018-10-04 03:27:29Z

26

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:

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

edited Oct 4, 2018 at 3:27

answered Feb 1, 2018 at 9:58

joeytwiddle

31.6k14 gold badges130 silver badges115 bronze badges

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

2 Comments

joeytwiddle Over a year ago

According to AST Explorer, this is called a ClassProperty.

joeytwiddle Over a year ago

After discovering this syntax, we considered using it for methods too, as an alternative to binding. However this article convinced us otherwise!

Jenna Rajani · Accepted Answer · 2017-10-12 17:14:30Z

17

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?

edited Oct 12, 2017 at 17:14

answered Oct 12, 2017 at 16:45

Jenna Rajani

2432 silver badges3 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related