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
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
color
for shape and name
for exact. What makes exact
different is the behaviour on extra properties. If you pass additional property age
to both of them, only exact
will give a warning.
Mar 27, 2020 at 10:21
isRequired
helps in maintaining the parameters sanity. However, if your intention is to fail the compilation, it would not help in that case. You will get a red colour error in console, but your app will run as usual. This is in regards to devlopment in localhost.
Mar 28, 2020 at 12:39
exact
if you want to see console warning when none of the valid keys are passed. However, if you have defined props with 2 valid keys, and if you only pass 1 you would not see any error. Take a look at this example - codesandbox.io/s/clarification-of-prop-types-forked-7tts4?file=/…
Aug 3, 2021 at 1:18