What is the purpose of using the super constructor with a props argument? in REACT

Practice



A child class constructor cannot use the

this
reference until the
super()
method has been called. The same applies to ES6 subclasses. The main reason for passing the props parameter to the
super()
call is to gain access to
this.props
inside your child constructors.

Passing props:

class MyComponent extends React.Component {
  constructor(props) {
    super(props)

    console.log(this.props) // prints { name: 'John', age: 42 }
  }
}

Not passing props

:

class MyComponent extends React.Component {
  constructor(props) {
    super()

    console.log(this.props) // prints undefined

    // but props parameter is still available
    console.log(props) // prints { name: 'John', age: 42 }
  }

  render() {
    // no difference outside constructor
    console.log(this.props) // prints { name: 'John', age: 42 }
  }
}

The code snippets above show that

this.props
differs only inside the constructor. It would be the same outside the constructor.
created: 2020-02-23
updated: 2026-03-09
226



Was this answer useful?
Choose a quick rating so we can improve the next answer for you.
How satisfied are you?


Comments

To leave a comment

If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Lectures and tutorial on "Scripting client side JavaScript, jqvery, BackBone"

Terms: Scripting client side JavaScript, jqvery, BackBone