Can't render the following code

My 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 "prop-types";
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 />
}
};

My browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36.

Challenge: Use PropTypes to Define the Props You Expect

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

Yes, you’ve added the line:

import PropTypes from "prop-types";

and you shouldn’t have.

I know it’s confusing because the instructions say:

Note: As of React v15.5.0, PropTypes is imported independently from React, like this: import PropTypes from ‘prop-types’;

But that is meant as a general reminder. When working in this FCC sandbox you don’t need to import it. It is reminding you that in the “real world” you would have to do it, but here, FCC is doing it for you behind the scenes.

When I remove that, your code passes for me.

1 Like

Oh thanks for pointing me out, thank you so much!