FAQ: this.state - Setting Initial State

Frequently Asked Questions JavaScript FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Setting Initial State” exercise from the lesson “this.state”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn ReactJS: Part I

FAQs on the exercise Setting Initial State

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

I was wondering, why do we need to inheritate props when declaring a state but when using only props we don’t need to?

2 Likes
3

I’d like to understand it either. I noticed that the “constructor” is used only when declaring a state. There is no “constructor” in stateless components for some reason. I didn’t find any explanation about that. Could anyone explain it please?

1 Like
5

I thought, not writing a constructor explicitly is the same as writing a constructor as the following:

constructor(props) {
  super(props);
}

When inheriting a class in JavaScript, if we don’t provide an extended class with a constructor, the constructor of the parent class will be called.

When we want to declare a state property in the constructor, I thought, first we need to write the default constructor as above explicitly and then add the declaration of the state property. So this was not confusing at all to me.

But on the other hand, I’m interested in whether the parameter props are really needed and what happens if we don’t include super(props). I think that, in those cases, the class would lose accesses to most of the features of React Component, but I don’t know yet. If there is a chance in the future exercises, I would like to try these things and report the results.

1 Like
6

I tried not to call super() in a constructor of an extended class, then I got ReferenceError:

ReferenceError: Must call super constructor in derived class before accessing ‘this’ or returning from derived constructor

It seems we have to call super() before we use this.

Next, is props really needed? It is recommended in a document of reactjs.org:

The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.

Is there no problem if we don’t use props? It seems, depends on codes. If we don’t pass props to the constructor, like this:

constructor() {
  super();
  ...
}

then undefined is passed to the constructor of the parent class. It is up to the code whether it causes an error. Furthermore, after an instance is created, it seems React automatically assigns props on the instance. So it is not really needed to pass props to super(). I have read the following articles about these things:

However, I think it’s better to always use super(pros), to prevent possible errors.

3 Likes
8

I want to mention that you can initialize your state directly without using a constructor by using react-alternative-class-component-syntax.

ex:

class Example extends React.Component {

  state = { mood: 'decent' }; // valid syntax
  
 
  render() {
    return <div></div>;
  }
}

this syntax will do the constructor for you under the hood, and sure you will still need this keyword to access the state. this.state.something

1 Like
9

How does this work if you are using a function component rather then a class component? is this covered later in the course?