PropTypes shape get marked as required

Question

So I'm trying to add a shape to my components objects. The object gets loaded from the server so isn't there from the beginning. But when I add the shape to the Proptypes. It keeps throwing the error that it is marked as required but it isn't.

Does the shape or the objectOf automatically add the isRequired value?

TopicsList.propTypes = {
  topicsObject: PropTypes.shape(reportsTopicsObjectResultShape),
};

And the shapes:

export const reportsTopicObject = PropTypes.shape({
 avg_rating_ord: PropTypes.number,
 cards_with_comments: PropTypes.number,
 cards_without_comments: PropTypes.number,
 number_of_questions: PropTypes.number,
 rating_count: PropTypes.number,
 scale_version_id: PropTypes.string,
 scale_id: PropTypes.string,
 last_answered_at: PropTypes.string,
 id: PropTypes.string,
 type: PropTypes.string,
 name: PropTypes.shape(translatedObjectSystem),
 description: PropTypes.shape(translatedObjectSystem)
});

export const reportsTopicsObjectResultShape = PropTypes.shape({
 topics_distribution: PropTypes.shape({
    general: PropTypes.number,
    groups: PropTypes.number,
    people: PropTypes.number
}),
 topic_list: PropTypes.objectOf(reportsTopicObject)
});

I still get the error:

Failed prop type: The prop `topicsObject.isRequired` is marked as 
required in `TopicsList`, but its value is `undefined`.

It is true that is undefined in the beginning which is okay but I don't want it to be required.

Answer 1

Neither shape nor objectOf by default cause the prop to become required. Here's an example straight from the react docs:

// An object with property values of a certain type
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

// An object taking on a particular shape
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

Here's an example you can play around with if you want that shows using shape does not make the object required (though using .isRequired at the end will create a warning).

One thing that's worth noting is that your error message looks a little weird. Usually error messages look like this:

"Warning: Failed prop type: The prop `foo` is marked as required in `App`, but its value is `undefined`.
in App"

Where the prop is shown as foo not foo.isRequired. Yours appears to say

prop `topicsObject.isRequired` 

so it might have something do with the way the shape is getting imported/exported.