Validate Custom React Component Props with PropTypes
In this lesson, we'll learn how you can use the prop-types module to validate a custom React component's props. We will start by building out a Proptypes object that throws an error if the prop passed is not of the required type. Then, we will import the React team's prop-types module and look at some of the useful utilities it provides like isRequired. Function components define Proptypes off of a property while Class components define Proptypes off of a static method.
When I use
SayHello.propTypes = {
firstName(props, propName, componentName) {
console.log('Hello')
}
}
This function is not getting called. Can anyone help me regarding this.
Found the issue, I was using production react and react dom scripts. Silly me
If propTypes are not supported, how can we validate props in production?
You shouldn't validate props in production. They add a LOT of unnecessary work because they're intended for development-only. Why would you want to? Just make sure that you have no proptypes warnings in development and you shouldn't have any in production.
@ahmeddotkom:
I believe the key is here:
make sure that you have no proptypes warnings in development and you shouldn't have any in production.
The development environment , when the software is running only in our own computers and not being used by our clients/customers/users is the appropriate place to test and check if there are any errors.
Using prop-types is the way we make sure those errors aren't happening. When we find them, we fix them. Once they are removed in the development environment they are removed once and for all, so no need to check again in the production environment .
Yeah makes sense, thanks.
I'm having trouble with the Error message. Mine is displaying this...
Warning: Failed prop type: Hey, you should pass a string for ${propName} in ${componentName} but you passed a ${typeof props[propName]}! in SayHello
I put my current code on a jsfiddle: https://jsfiddle.net/qms7d56x/
Any help would be appreciated!
Looks like you're using a normal string when you should be using a template literal with back-tics (`).
I am getting "PropTypes not defined" error, please help!!!
https://q5lop2ykj.codesandbox.io/
I am getting "PropTypes not defined" error, please help!!!
https://q5lop2ykj.codesandbox.io/ @Lokesh This link is dead
Why does your implementation of 'propTypes' throw an Error when you actually never call it? Seems like more of a JS thing then React (yea, I know React is just JS haha).
React will call it for us (in development mode)!
Hey Kent, in your first transcript code example, you're missing a comma:
reactDOM.render( <SayHello firstName={true} />, document.getElementById('root') )
Hey Kent, in your first transcript code example, you're missing a comma:
reactDOM.render( <SayHello firstName={true} />, document.getElementById('root') )
Thanks! Will fix.
Hi! reactDOM is not defined. I believe it should be ReactDOM is not defined
Hello Kent, (following up with @celipas) In your first code snippet, you had
reactDOM.redner()instead ofReactDOM.render()the R should be capitalize
Just an FYI, in transcript, thecode under <code>class SayHello extends React.Component</code> should be <code> Hello {firstName} {lastName}! </code>
Script for prop-types should be
<script src="https://unpkg.com/prop-types@15.6.0/prop-types.js"></script>The unpkg script wasn't working for me. I changed to this source and it works: https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.js
It would be helpful if you didn't use features in your modules unless you also explain them. In this case, you used back-ticks and just whizzed by it without mentioning it at all. That makes it really hard to follow when you're a beginner.
Update paths to point to development version:
<script src="https://unpkg.com/react@16.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js"></script>When I use SayHello.propTypes = {
firstName(props, propName, componentName) { console.log('Hello') } }
This function is not getting called. Can anyone help me regarding this.