Why is React not checking my propTypes?

Question

I have read the official documentation and the npm package description for PropTypes.

However, when I run this code,

const propTypes = {
    foo: PropTypes.string.isRequired,
    bar: PropTypes.number.isRequired,
    umu: PropTypes.string
};

const defaultProps = {
    umu: "default value"
};

class MyComp extends React.Component {
    constructor(props){
        super(props);
    }

    render() {
        return (
        <ul>
            <li>foo is {this.props.foo}</li>
            <li>bar is {this.props.bar}</li>
            <li>umu is {this.props.umu}</li>
        </ul>
        );
    }
}
MyComp.propTypes = propTypes;
MyComp.defaultProps = defaultProps;

class MyWrapper extends React.Component{
    render() {
        return (
            <div>
                <MyComp bar="string and not a number"/>
            </div>
        );
    }
}

ReactDOM.render(React.createElement(MyWrapper, null, null), document.getElementById("app"));

my propTypes are not checked, although the required property foo is not set and the property bar is not a number. Can anybody tell me what I do wrong? Here's the corresponding CodePen.

Thanks a lot in advance.

Answer 1

The component will render even if it fails validation, this is more of a warning to the developer so you would see the error on the console. CodePen is not displaying those warnings, however, maybe because you're using the production version of react? Either way, this is correct behavior.