Use PropTypes to Define the Props You Expect[NEW]

JavaScript
1

Tell us what’s happening:
Log says: require is not defined

Your code so far


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

// change code below this line
import { PropTypes } from 'react';

Items.propTypes = {
  quantity: propTypes.number.isRequired
}
// change code above this line

Items.defaultProps = {
  quantity: 0
};

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

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/use-proptypes-to-define-the-props-you-expect

2

a bit too much code here.
Remove the import statement and then fix your propTypes definition so that the quantity property is checked like this:

quantity: PropTypes.number.isRequired

(notice the capital PropTypes vs the one you used had small p)

3 Likes
3

Hi why is there an inconsistency here with propType type definition vs PropType method call I’m starting to hate React! This is just plain awful for someone who is Dyslexic and struggles to see small nuance in code. Maybe in this question you could highlight where there are differences in capitalisation or even better catch such issues with your error handling?.

4

many programming languages are case sensitive. Also many rely on certain conventions regarding capitals in names of methods, all caps for constants, and something called camel-case for variables. Unfortunately paying attention to details of capitalization is a skill that takes some practice but most people who program daily get used to it eventually.