number.isRequired ...but is it? [React]

why does the code work with a letter as props?

  **Your code so far**

const Items = (props) => {
return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
};

Items.propTypes = { quantity: PropTypes.number.isRequired };

Items.defaultProps = { quantity: 0 };

class ShoppingCart extends React.Component {
constructor(props) {
  super(props);
}
render() {
  return <Items quantity={'w'} />
}
};

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36

Challenge: Use PropTypes to Define the Props You Expect

Link to the challenge:

Hello!

It’s not a bug, it’s a feature… The lesson is working properly; the problem is that type checking is not enforced in a React production build, which is the case for this particular lesson.

From the React documentation:

So, it will not work properly here.

This lesson should be taken as informative (to let you know the tool exists), but for production you should use something different, like TypeScript or Flow.

1 Like