15

After you've defined this, is there a difference between using this.props and props?

constructor(props) {
  super(props);

  this.state = {
    input: this.props.input,
    input2: props.input2
  };
}

In this case, what the difference between input and input2 here?

1
  • 1
    console.log(props === this.props); // true -- so it's the same object
    – iurii
    Aug 30, 2016 at 14:40

4 Answers 4

24

The rules for ES2015 (ES6) classes basically come down to:

In a child class constructor, this cannot be used until super is called.

ES6 class constructors MUST call super if they are subclasses, or they must explicitly return some object to take the place of the one that was not initialized.

So as the super(props) is called in the constructor. props and this.props are same. so,

props === this.props // true
6

Basically, it's same in this case, but if you consider the whole component then props can only be available if you pass props as function argument such as below example

componentWillMount(){
  this.someFunc(this.props);
}

componentWillReciveProps(nextProps){
  this.someFunc(nextProps);
}

someFunc(props) {
 ...... 
 // in here props and this.props are completely different
 as props is you latest props while this.props can be you previous props
}

while you can access this.props from anywhere of you component, i hope this gives you the idea

3

No diffrence.

props === this.props // true
0

no difference after you called super(props) in your constructor. You can read more in-depth about it here: https://overreacted.io/why-do-we-write-super-props/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.