Cuando se usa Super() y Super(props) en React.js

Cuando trabajamos con React.js  muchas veces tenemos errores en el contructor por no declarar el método  Super  vamos a ver algunos ejemplo de cuando es necesario:

class MyComponent extends Component {
    constructor(){
        super();
        this.state = {
            name: ''; 
        };
    }
    render () {
        return (
            <p> Name: { this.state.name }</p>
        );
    }
}

Para el caso anterior es necesario usar Super para poder usar la clausula “this” dentro del constructor y definir la variable de estado name.

Si suponemos que el valor viene en una propiedad recibida desde el componente padre tendríamos el siguiente código:

class MyComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
            name: this.props.name; 
        };
    }
    render () {
        return (
            <p> Name: { this.state.name }</p>
        );
    }
}

Para este ultimo caso es necesario pasar por el método Super las props que se están recibiendo pues si esta linea no existe tendremos una excepción.

Para resumir:

Super -> habilita this dentro del constructor del componente

Super(props) -> habilita this.props dentro del constructor  del componente