Question about the difference between propTypes and PropTypes

Hello,

I am wondering what the difference between propTypes and PropTypes is in this scenario (stateless functional component)

MyComponent.propTypes = { handleClick: PropTypes.func.isRequired } 

I understand that “PropTypes.func part checks that handleClick is a function”, however, I don’t understand what the meaning of propTypes itself. Is propTypes a custom property or is it a keyword? If it is a custom property of the component itself (not to be confused with the argument props), how does the component know where to look for it?

Challenge: Use PropTypes to Define the Props You Expect

Link to the challenge:

  • props is an object passed to the component instance.
  • propTypes is an object were you declare the types of the data under props.
  • PropTypes it is an object packed with some utility - props type checker - functions to include in propTypes, so we don’t reinvent the wheel.

For example:

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
Greeting.propTypes = {
  name: PropTypes.string
};

I guess at compiling time they will run a - more convoluted - loop through the props like this:

for (let prop of props){
if (typeof(prop)===component.propTypes(prop)) return render()
else return error()
}
1 Like