Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When do i need to pass prop to constructor of a react component using super(props)? [duplicate]

Many time we send props in the constructor but we never use this.props anywhere in the constructor so why do need to pass that and when do need to do that.

 class App extends React.Component {

      constructor(props) {
        super(props);    // When do we need to send props to the constructor
        this.state = {
           data: 'Initial data...'
        }
        this.updateState = this.updateState.bind(this);
      };

      updateState(e) {
          this.setState({data: e.target.value});
      }

      render() {
        return (
           <div>
             <input type = "text" value = {this.state.data} 
              onChange = {this.updateState} />
             <h4>{this.state.data}</h4>
          </div>
        );
      }

   }
like image 754
saprative Avatar asked Jul 22 '16 15:07

saprative


People also ask

Why do we need to pass props in constructor in React?

So to ensure that the React. Component 's constructor() function gets called, we call super(props) . super(props) is a reference to the parents constructor() function, that's all it is. We have to add super(props) every single time we define a constructor() function inside a class-based component.

Why would you use super constructors with props arguments?

Using super constructor with props arguments basically allows accessing this. props in a Constructor function. Let us create a React project and then we will create a UI to showcase the above purpose. Users will be able to see the application of the super constructor with props argument.

Why we need to pass Props to super () method and what will happen if we omit that?

It turns out that React also assigns props on the instance right after calling your constructor: // Inside React const instance = new YourComponent(props); instance. props = props; So even if you forget to pass props to super() , React would still set them right afterwards.

Why we use super in constructor in React?

The super() is used inside the constructor for the purpose to get access to this keyword inside our constructor. With this let's try to understand super() first. Super is a keyword in JavaScript and is used to call super or parent class in the hierarchy. React class extends React Component with ES6 syntax.


1 Answers

Props aren't actually needed by the React.Component constructor. You can write this code and everything works just fine:

constructor() {
    super();
    this.state = {
       data: 'Initial data...'
    };
    this.updateState = this.updateState.bind(this);
  };

This is because the constructor path is not actually where your props get assigned in the standard React life cycle. React.Component does not actually use props and only sets this.props in case your constructor needs to use it. But usually you shouldn't be using props in your constructor anyway because using props to initialize your state is an anti-pattern

If you've configured babel, you don't even need a constructor for stuff like this:

class MyComponent extends React.Component {
    state = { data: "initial data" };

    updateState = (arg1, arg2) => { ... };

    // instead of:
    // updateState(arg1, arg2) { ... }

}
like image 131
Brandon Avatar answered Oct 19 '22 04:10

Brandon