Passing props via super(props) when extending another component not working

I’m not sure if this is a real issue or not but the behavior was unexpected for me. React version: 0.13.3

I have two components, Shape and Circle. Shape is a general concept and Circle is just a special case of Shape. I’m using ES6 class syntax to define the components. I’m trying to override Shape’s defaultProps by passing props from Circle’s constructor using super(props). This isn’t working.

See the following code(or JSBin):

import React from 'react';

class Shape extends React.Component {
    constructor(props) {
        // At this point, props.shapeType === 'Circle', when Circle component
        // Is used
        super(props);
    }

    render() {
        // At this point this.props.shapeType is still null,
        // I expected it to equal 'Circle'
        console.log(this.props);

        return <div>{this.props.shapeType}</div>;
    }
}
Shape.defaultProps = {
    shapeType: null
};

class Circle extends Shape {
    constructor(props) {
        let propsCopy =  Object.assign({}, props);
        propsCopy.shapeType = 'Circle'
        super(propsCopy);
    }
}

React.render(
    <Circle />,
    document.querySelector('body')
);

[sophiebits]

Do not use inheritance to build React components. Try:

class Circle extends React.Component {
    render() {
        return <Shape {...this.props} shapeType="Circle" />;
    }
}

[gaearon]

Our recommendation is to not use inheritance for React components. https://reactjs.org/docs/composition-vs-inheritance.html

There are many pitfalls, and if you disagree with this recommendation, you’re mostly on your own.