React, why use super(props) inside of ES6 class constructor?

reactjs ecmascript-6 super
malexanders picture malexanders · Jun 18, 2016 · Viewed 23.2k times · Source

I realize the super keyword can be used to call functions in a parent component. However, I'm not totally clear why you would use the super keyword in the example below - just passing it whatever props are being passed to the constructor.

Can someone please shed some light on the various reasons for using the super keyword in an ES6 class constructor, in react?

  constructor(props) {
    super(props);

    this.state = {
      course: Object.assign({}, this.props.course),
      errors: {   }
    };

    this.updateCourseState = this.updateCourseState.bind(this);
  }

Answer

jmancherje picture jmancherje · Jun 18, 2016

super allows you to access the constructor method of the parent class. The only reason to include props is to access this.props inside of your constructor.

What's the difference between "super()" and "super(props)" in React when using es6 classes?

Related questions

what does super() do without any arguments?

I'm learning react from the docs, but not sure what the super() does in this example. Usually, doesn't it take the arguments that are passed to making a new instance and then calls React.Component's constructor method to incorporate these …

Read More
How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More
Adding script tag to React/JSX

I have a relatively straightforward issue of trying to add inline scripting to a React component. What I have so far: 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } …

Read More