DEV Community

Discussion on: How to specify the shape of an object with PropTypes

View post

Replies for: Hi, nice article thanks. I have one question: How should objects be marked as required. Let's say I have an object: user: PropTypes.Shape({ ...

Collapse
 
cesareferrari profile image
Cesare Ferrari •

Not sure if I understand your question correctly, but you would use PropTypes on a component, not an object.

So, if you have a User component, you would use PropTypes to enforce that the User component gets passed a prop named id and a prop named name, like this:

User.propTypes = {
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired
}
Enter fullscreen mode Exit fullscreen mode

On the other hand, if you have a UserList component, that has a user prop that is an object, you would set id and name properties of the user object as isRequired and that would give you a warning if the user is not passed in at all.

UserList.propTypes = {
  user: PropTypes.shape({
    id: PropTypes.number.isRequired  // required property user
    name: PropTypes.string.isRequired // required property of user
  })
}
Enter fullscreen mode Exit fullscreen mode

Hope this makes sense.

Collapse
 
samthomson profile image
Sam Thomson •

Hey, no sorry what I meant was the user was an object, I should have denoted it with the shape type.
Although I wasn't sure if the user would automatically be required if all of its props were required, like this:

user: PropTypes.shape({
    id: PropTypes.string.isRequired  // required property user
    name: PropTypes.string.isRequired // required property of user
})
Enter fullscreen mode Exit fullscreen mode

I figured out that in the above, those props are only required if the user is passed in at all. To also ensure a user is passed, not just a valid user I needed:

user: PropTypes.shape({
    id: PropTypes.string.isRequired
    name: PropTypes.string.isRequired
}).isRequired
Enter fullscreen mode Exit fullscreen mode

Shall leave it here in case it helps anyone else.

Thread Thread
 
thebuildguy profile image
Tulsi Prasad • • Edited

Thanks Sam, my eslint was throwing error and this fixed it!