I have created two models State and City in separate files. Importing City in the State.
State can have an array of Cities inside it.
The below code works fine.
State.js
let State = PropTypes.shape({
name: React.PropTypes.string,
cities: PropTypes.arrayOf(PropTypes.shape(City))
});
City.js
let City = PropTypes.shape({
name: React.PropTypes.string,
population: PropTypes.number
});
However, when i rewrite the cities as
let State = PropTypes.shape({
name: React.PropTypes.string,
cities: PropTypes.arrayOf(City)
});
it gives me warning.
Summary:
cities: PropTypes.arrayOf(PropTypes.shape(City)) works.
cities: PropTypes.arrayOf(City) doesn't.
It gives me following warning:
Warning: Failed propType: Property xx of component Xx has invalid PropType notation inside arrayOf. Check the render method of Yy.
My question is, City is a Proptypes.shape, then why do I need to mention Proptypes.shape(City) again in Proptypes.arrayOf?
In your code:
let City = PropTypes.shape({
name: React.PropTypes.string,
population: PropTypes.number
});
What version of React are you using? You're referencing PropTypes from React.PropTypes and PropTypes. How are you importing PropTypes? Are you using the prop-types package?
I am using a similar scenario and it works for me. What does your render look like and what is the data provided for the prop?
For me, the following absolutely works:
cities: PropTypes.arrayOf(City)
I've got the same issue, and on my case, it was because one file was loaded before the other file.
In your case, it could be because City.js is not yet loaded when you load State.js
I can share what was the problem in my case. This was the code that caused the error:
const answerPropType = PropTypes.shape({
author: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
followUps: PropTypes.arrayOf(followUpPropType)
})
const followUpPropType = PropTypes.shape({
author: PropTypes.string.isRequired,
text: PropTypes.string.isRequired
})
The problem is that followUpPropType was declared after answerPropType. So I just inverted their order:
const followUpPropType = PropTypes.shape({
author: PropTypes.string.isRequired,
text: PropTypes.string.isRequired
})
const answerPropType = PropTypes.shape({
author: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
followUps: PropTypes.arrayOf(followUpPropType)
})