React - Override Default Props

Hi, I want to learn how to show the default props on UI. For example in here, we have a default props called quantity and its set to 0. How can I use it in the Parent component so it can show the default value?

Your code so far

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

Items.defaultProps = {
  quantity: 0
}

class ShoppingCart extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    { /* Change code below this line */ }
    return <Items quantity={10} />
    { /* Change code above this line */ }
  }
};

Your browser information:

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

Challenge: React - Override Default Props

Link to the challenge:

Don’t use the prop if you want to use the default value.

It doesn’t make any sense that you would want to overwrite the passed value with a default value. It works the same as default parameter values, if the function is pass the value as an argument you use that value, otherwise, you use the default value.

PropTypes aren’t commonly used in modern React. Use TypeScript for static type checking.

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