Question about the super keyword?

Question

JavaScript

As the documentation says: The super
keyword is used to call functions that belong to an object's parent. I often see super in constructors, especially in React code. Although here in js this word was rarely met with me. Why is that? Why is there often a constructor without it in js, but in React it is everywhere where there is a constructor? And another question here is an example of code where, when a button is clicked, a new window opens. What function does super call here? What is the parent to which the function belongs and what is the object (child)? And what would happen if there were no super? Well, that is, I understand that there would be an error, but if it weren’t there, how else would you have to write code?

import React, { Component } from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';

class Example extends Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { collapse: false };
  }

  toggle() {
    this.setState(state => ({ collapse: !state.collapse }));
  }

  render() {
    return (
      <div>
        <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
        <Collapse isOpen={this.state.collapse}>
          <Card>
            <CardBody>
            Anim pariatur cliche reprehenderit,
             enim eiusmod high life accusamus terry richardson ad squid. Nihil
             anim keffiyeh helvetica, craft beer labore wes anderson cred
             nesciunt sapiente ea proident.
            </CardBody>
          </Card>
        </Collapse>
      </div>
    );
  }
}

export default Example;

code source link:
reactstrap.github.io/components/collapse

Answer 1

super(props) is used to call the constructor(props) method on React.Component, we write extends, roughly speaking, under the hood

class Component {
  constructor(props) {
    this.props = props;
  }
}

and without the constructor it looks like this

import React, { Component } from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';

class Example extends Component {
  state = {
    collapse: false
  };

  toggle = () => {
    this.setState(state => ({ collapse: !state.collapse }));
  }

  render() {
    return (
      <div>
        <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
        <Collapse isOpen={this.state.collapse}>
          <Card>
            <CardBody>
            Anim pariatur cliche reprehenderit,
             enim eiusmod high life accusamus terry richardson ad squid. Nihil
             anim keffiyeh helvetica, craft beer labore wes anderson cred
             nesciunt sapiente ea proident.
            </CardBody>
          </Card>
        </Collapse>
      </div>
    );
  }
}

export default Example;