CODEWITHSUNDEEP
reactjs
Antonio Pavicevac-Ortiz
Antonio Pavicevac-Ortiz

Reputation: 7739

How does props parameter/argument work with constructor keyword work in React?

Can someone explain why do you have to supply the props keyword to the constructor? I thought when you were building components the tree works from the top down...meaning the props will be used eventually in a child component.

I remember hearing in a podcast, in which Kyle Simpson was a guest that the 'super' keyword was a way to get a relative polymorphic reference (from a method to a base class) in a class based system. Or from what I understand this is how the syntactic sugar would work, because under the covers it's a delegation model.

Thank you in advance!

import React, {Component} from 'react'

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      warpDriveCapacity : 10
    }
  }

}

Upvotes: 0

Views: 215

Answers (1)

Abhishek Jain
Abhishek Jain

Reputation: 171

If you want to use "this.props" in the constructor, you need to pass props to super. Otherwise, it doesn't matter because React sets .props on the instance from the outside immediately after calling the constructor.

for Example:

export class ComponentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stateKey: props.initialProps
    };
  }
  //...
}

Upvotes: 1

Related Questions