MobliMic

Default Props Using withComponent()

Michael Craddock
Michael Craddock

When working on a styled component that was extending an existing component with default props I noticed an interesting behaviour that I thought was worth documenting.

import { Component } from 'react';

class ComponentA extends Component {
    render(){
        return <span>Component A</span>
    }
}

ComponentA.defaultProps = {
  height: '100px',
  width: '100px'
};
import ComponentA from '../componenta';

const NewComponent = () => {
    return <div></div>
};

const ComponentB = NewComponent.withComponent(ComponentA);

ComponentB.defaultProps = {
    width: '200px',
    height: '200px'
};

Component b will be a span with default props of 100px each

It's worth noting that withComponent is looking to likely be deprecated soon. And this information will be useless. You can find out more about it at the link here: https://styled-components.com/docs/api#withcomponent


More Stories