React - Use PropTypes to Define the Props You Expect

JavaScript
1

  • Failed:The ShoppingCart component should render.

  • Failed:The Items component should render.

import PropTypes from 'prop-types';
const Items = (props) => {
  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>;
};

// Define propTypes for the Items component to require quantity as a prop and verify that it is of type number.
Items.propTypes = {
  quantity: PropTypes.number.isRequired
};

Items.defaultProps = {
  quantity: 0
};

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

import PropTypes from 'prop-types';
const Items = (props) => {
  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>;
};

// Define propTypes for the Items component to require quantity as a prop and verify that it is of type number.
Items.propTypes = {
  quantity: PropTypes.number.isRequired
};

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/122.0.0.0 Safari/537.36 Edg/122.0.0.0

Challenge Information:

React - Use PropTypes to Define the Props You Expect

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

The problem I was facing is related to rendering both shoopingCart and Items component .I thought that the parser could handle it because i believe that there is index.html file at the back .But it is not rendering can you help me with this ?I can explain if this isnot clear!.Thank you!

import PropTypes from 'prop-types';
const Items = (props) => {
  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>;
};

// Define propTypes for the Items component to require quantity as a prop and verify that it is of type number.
Items.propTypes = {
  quantity: PropTypes.number.isRequired
};

Items.defaultProps = {
  quantity: 0
};

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

Hi @surafel1

You added the the following line of code …

import PropTypes from 'prop-types';

which is running in the background, causing the tests to fail.

You also altered the comment text.

Please remove the first line of code.
For next time, only add or change the code asked for in the instructions.

Happy coding

5

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