React PropTypes import class. Prop type is invalid

Question

I have several large objects that I use in many components so I made a proptypes file for each large object like this:

PropTypes/PropLargeObject.js

which contains import PropTypes from "prop-types";

const PropLargeObject =
    PropTypes.shape({
        id: PropTypes.number.isRequired, 
        name: PropTypes.string.isRequired,
        items: PropTypes.ArrayOf(PropTypes.Shape({
            itemId: PropTypes.number.isRequired,
            itemName: PropTypes.string.isRequired 
        }))
    });

export default PropLargeObject;

I use the object in my components like this:

import {PropLargeObject} from "./PropTypes/PropLargeObject";

Component.propTypes = {
    LargeObject: {PropLargeObject}
}

It gives me warning Prop type "PropLargeObject" is invalid it must be a function, usually from React.PropTypes. What am I doing wrong here?

Ori Drori Ori Drori · Accepted Answer · 2017-11-02T09:33:39

Remove the unnecessary curly brackets:

import PropLargeObject from "./PropTypes/PropLargeObject"; // PropLargeObject is the default export

Component.propTypes = {
    LargeObject: PropLargeObject // PropLargeObject is a PropTypes.shape function. Don't wrap with an object
}

You can even shorted it a bit:

import LargeObject from "./PropTypes/PropLargeObject"; // you can assign whatever name you want to default imports

Component.propTypes = {
    LargeObject
}

React PropTypes import class. Prop type is invalid

1 Answers