Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between PropTypes.exact and PropTypes.shape

What's the difference between

PropTypes.exact({
  name: PropTypes.string,
  age: PropTypes.number
})

vs

PropTypes.shape({
  name: PropTypes.string,
  age: PropTypes.number
})

I will be glad of any help

like image 253
Loppik Avatar asked Nov 24 '19 15:11

Loppik


People also ask

What does PropTypes shape do?

PropTypes lets us go further, though. It lets us describe in detail the inner structure of an object, what is called the shape of an object. This makes our data validations more thorough and accurate. The way we do this deep validation is by using the shape() method of PropTypes .

What is the difference between flow and PropTypes?

Flow is a static analysis tool which uses a superset of the language, allowing you to add type annotations to all of your code and catch an entire class of bugs at compile time. PropTypes is a basic type checker which has been patched onto React.

What does PropTypes node mean?

PropTypes. node: any render-able value like numbers and string, that can actually be rendered on screen. PropTypes. any: any type of value, even those are non-render-able like boolean.

What is the purpose of the PropTypes package?

PropTypes are simply a mechanism that ensures that the passed value is of the correct datatype. This makes sure that we don't receive an error at the very end of our app by the console which might not be easy to deal with.


1 Answers

Basically exact will give you a warning if your prop object contains extra property not mentioned while declaring it through PropTypes.exact({ }).

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

  // An object with warnings on extra properties
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }), 

Reference: https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes

like image 155
Utsav Patel Avatar answered Sep 20 '22 21:09

Utsav Patel