React, why use props in the constructor?

Asked

Viewed 2,451 times

7

Why should I wear props within the constructor and of props?

constructor(props){super(props)}
  • Why use props in the constructor?
  • Why use props in the super?
  • Why use super?
javascript react

  • Because when the element is rendered, an instance of it is created, in that instantiation the properties are passed (new MyElement({propName: 'propValue'}). The super serves to call the extended class constructor, if it does this because React does a few more things with these properties

  • Passing props through the instance is optional. It can be used if you want to do something with them in the constructor. Calling constructor() {super()} will work.

  • But what are these props that come through the constructor? I try to give them a console.log, but I can’t do it

  • This article written by one of the React team members explains this need. Read it file.

  • There’s a very good article by Dan Abramov (One of the main developers of Redux and super relevant figure of React)about this: https://overreacted.io/why-do-we-write-super-props/ Here’s a tip including a great name to follow for those who want to work with React.

2 answers

6

In React, when creating a statefull component, you must extend a Native Javascript Class, with the React.Component getting:

class Container extends React.Component {
  render() {
    return (
      <div>
      </div>
    );
  };
}

Thus the property props belongs to the React.Component, and to access the content of React.Component in the assembly of the class Container, should be used the super to inject the properties (props, methods) as soon as the constructor is called. Thus remaining:

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

    this.state = {
      list: props.list
    }
  }

  render() {
    return (
      <div>
      </div>
    );
  };
}

So the definition of MDN says that:

The keyword super is used to access the parent object of an object, in other cases it is used to access the parent class of a class.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super

2

Why use super?

The keyword super is used to access the parent object of an object, in other cases it is used to access the parent class of a class.

When used in the constructor of a class, super should be used only once, and before the keyword this can be used.

Why use props in the constructor?

It only makes sense to use it in the constructor if you want to initialize state based on props. Or if you want to use some method passed via props.

Example:

class Pai extends React.Component {
  render() {
    return (
      <div>
        <Filho num={0} />
        <Filho num={10} />
        <Filho num={20} />
      </div>
    );
  };
}

class Filho extends React.Component {
  constructor(props) {
    super();

    this.state = {
      num: props.num,
    };
  };

  handleClick = () => {
    const {num} = this.state;
    this.setState({ num: num + 1});
  };

  render() {
    const { num } = this.state;

    return (
      <div>
        num = {num}
        <button
          onClick={this.handleClick} 
        >
          +
        </button>
      </div>
    );
  };
}

Demo in the codepen

Why use props on super?

You can use super() or super(props). The only difference is that using super(props) will cause this.props is identical to props.

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.