Learning React from the docs and came across this example:
class Square extends React.Component { constructor() { super(); this.state = { value: null, }; } ... }
According to Mozilla, super allows you to use this
in the constructor. Is there any other reason to use a standalone super
(I know super
allows you to access parent class's methods as well) but with React is there any other use case of just calling super()
by itself?
super() will call the constructor of its parent class. This is required when you need to access some variables from the parent class. Hope this helps!
super() is used to call the parent constructor. super(props) would pass props to the parent constructor. From your example, super(props) would call the React. Component constructor passing in props as the argument.
The super keyword is used to call the constructor of its parent class to access the parent's properties and methods.
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.
super()
will call the constructor
of its parent
class. This is required when you need to access some variables from the parent class.
In React, when you call super
with props, React will make props
available across the component through this.props
. See example 2 below
without super()
class A { constructor() { this.a = 'hello' } } class B extends A { constructor(){ console.log(this.a) //throws an error } } console.log(new B())
with super()
class A { constructor(props) { this.props = props } } class B extends A { constructor(props) { super(props) console.log(this.props) } } console.log(new B({title: 'hello world'}))
Hope this helps!
super()
is called inside a react component only if it has a constructor. For example, the below code doesn't require super:
class App extends React.component { render(){ return <div>Hello { this.props.world }</div>; } }
However if we have a constructor then super()
is mandatory:
class App extends React.component { constructor(){ console.log(this) //Error: 'this' is not allowed before super() } }
The reason why this
cannot be allowed before super()
is because this
is uninitialized if super()
is not called. However even if we are not using this
we need a super()
inside a constructor because ES6 class constructors MUST call super if they are subclasses
. Thus, you have to call super()
as long as you have a constructor. (But a subclass does not have to have a constructor.)
We call super(props)
inside the constructor if we have to use this.props
, for example:
class App extends React.component{ constructor(props){ super(props); console.log(this.props); // prints out whatever is inside props } }
I hope I could make it clear.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With