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
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 .
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With