React - Use PropTypes to Define the Props You Expect

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.
I can not get this to pass I have reset it twice and watched videos that say this is the solution!

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

// Change code below this line
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 />
  }
};

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

// Change code below this line
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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0

Challenge Information:

React - Use PropTypes to Define the Props You Expect

2

Is there an error in your console? You have a typo/capitalization error that should be giving you this error in the console:

ReferenceError: propTypes is not defined

3

yes I am getting that error but I cannot find the typo/capitalization error i have checked my code multiple times

4 
// Change code below this line
Items.propTypes = {quantity: propTypes.number.isRequired
};
// Change code above this line
5

from the example:

{ handleClick: PropTypes.func.isRequired }

:eyes:

6

That does not help me with what i currently have in the code. I do not understand what you are saying is missing. I have looked at the example and that does not tell me how to re-write the code!

7

The error message is telling you exactly where the typo is. You could try copy/pasting the line from the example and then changing it to fit what you need.

8

Start with bigg P as sead. Hope this helps…

9

Thanks i got it but I am not understanding why in the first instance propTypes is used un capitalized and then in the function it has to be capitalized?

1 Like
10

The reason for the capital “P” in PropTypes is because it’s a specific object imported from the prop-types library, and it should always be capitalized as such.

11

That’s definitely confusing when it’s used side by side like this. I think because one is a function and one is a Class. It’s a naming convention to use camelCase for functions and PascalCase for Classes:

https://www.freecodecamp.org/news/snake-case-vs-camel-case-vs-pascal-case-vs-kebab-case-whats-the-difference/

https://stackoverflow.com/questions/9603625/javascript-coding-standards-pascal-casing-or-camel-casing#9603703

https://cscareerline.com/camel-case-vs-snake-case/#Pascal_Case

12

You can use some knowledge of JS to help you remember it.

When proptypes is left of the dot . it is an object and by convention, it will use pascal case ObjectName

When proptypes is right of the dot . it is a property on an object and by convention, it will use camel case propertyName

Sure the naming is by convention, but the convention is used on the implementer side, not the consumer side.

Technically you can alias the import and property.

import * as propTypes from 'prop-types'
const whatEver = 'propTypes';

Items[whatEver] = {
  quantity: propTypes.number.isRequired,
};

but that seems like a bad idea.

This won’t work in the challenge because it isn’t actually using prop-types (it is a mock).

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.