Menu
Here is my code which produces
Warning: LoaderView(...): When calling super() in
LoaderView, make sure to pass up the same props that your component's constructor was passed.
import * as React from "react";
import {ActivityIndicator, Text, View} from 'react-native'
export class LoaderView extends React.Component {
constructor(props) {
super(props)
}
props = {
title: "",
loading: false
}
render() {
if (this.props.loading) {
return <View {...this.props} style={{flex: 1, justifyContent: 'center'}}>
<ActivityIndicator
size={"large"}
animating={true}/>
<Text
style={{textAlign: 'center', fontSize: 20, fontWeight: '500'}}>
{this.props.title}
</Text>
</View>
} else {
return <View {...this.props} style={{flex: 1, justifyContent: 'center'}}>
<Text
style={{textAlign: 'center', fontSize: 20, fontWeight: '500'}}>
{this.props.title}
</Text>
</View>
}
}
}
How to resolve this warning in above code?
987
In React Native when using super(props) you can immediately access the props via this. props in the constructor while with only super() you can't. In other methods like render however you can always utilize this.
Explanation: If we want to use this in the constructor, we need to pass it to super. If we want to use this. props inside the constructor we need to pass it with the super() function. Otherwise, we don't want to pass props to super() because we see this.
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.
In React, the constructor is called during component creation and before mounting. If you want to implement the constructor for a React component, call the super(props) method before any other statement. Otherwise, this. props will be undefined in the constructor and create bugs.
super (props) is required to be called in constructor to access this.props. If it is not called in constructor, then this.props will be undefined in constructor. If you have been using react for a while, then you must be calling super (props) in constructor. Why do we have to do so? super () is basically calling the parent function.
But this.props would still be undefined between the super call and the end of your constructor: It can be even more challenging to debug if this happens in some method that’s called from the constructor. And that’s why I recommend always passing down super (props), even though it isn’t strictly necessary:
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. class TodoApp extends React.Component { constructor(){ super(); console.log(this.props); // this will be undefined } ... }
But somehow, even if you call super () without the props argument, you’ll still be able to access this.props in the render and other methods. (If you don’t believe me, try it yourself!) How does that work? It turns out that React also assigns props on the instance right after calling your constructor:
use defaultProps instead of props
static defaultProps = {
title: "",
loading: false
}
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
