PropTypes giving error no matter if the type is right

0
votes

I'm using React with PropTypes and hooks

"prop-types": "^15.7.2",

"react": "^16.11.0",

And I have a component that receives an object with some data from the database. Then, testing the data:

{ console.log('Carousel reciving: ', typeof informations, informations) }

Gives the following console log:

Carousel reciving:  object (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Data is sent to the component by the call:

<Carousel informations={informations} isLoading={isLoading} />

And the component:

const Carousel = ({ informations, isLoading }) => (
    <ReactPlaceholder ...some props />...some content</ReactPlaceholder>
) // Carousel

But no matter if I change the PropType to array or object, it still giving the following error:

Warning: Failed prop type: Invalid prop informations of type array supplied to Carousel, expected object.

If I change to PropType.object.isRequired, the error says that the value provided is of type array. And if I change to PropType.array.isRequired, the error says that the value provided is of type object:

Carousel.propTypes = {
    informations: PropTypes.object.isRequired,
    isLoading: PropTypes.bool.isRequired,
} // propTypes

I know I could use the fetch function inside the component, but this data is shared with other components.

1
javascriptreactjsreact-proptypes

1 Answers

2
votes

From your console.log, informations is in fact an array of objects; it's logging as [{…}, {…}, note the opening [.

So you want to change your propTypes to 

Carousel.propTypes = {
    informations: PropTypes.arrayOf(PropTypes.object).isRequired,
    isLoading: PropTypes.bool.isRequired,
}