Override Default Props - coding challenge react

JavaScript
1

Tell us what’s happening:
I can’t seem to figure out how to solve this coding challenge. Thank you for the help!

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.props = {quantity :10}/>
    { /* change code above this line */ }
  }
};

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/override-default-props

3

what helped me with this challenge was the note it has which says:

Note: Remember that the syntax to add a prop to a component looks similar to how you add HTML attributes. However, since the value for quantity is an integer, it won’t go in quotes but it should be wrapped in curly braces. For example, {100}. This syntax tells JSX to interpret the value within the braces directly as JavaScript.

Especially the part “looks similar to how you add HTML attributes”
so for eg. if I wanted to add an id attribute to a p element in html I would do it like this:

<p id="myID">hello!</p>

So hopefully this jogs your memory as well…

4

First, in order to pass props, we don’t need to specify ‘props’ keyword with the component name, just like below
<Items.props = {quantity :10}/> // incorrect

Second, we declare default props by passing in an object, but we don’t have to pass an object when we give value to props from parent components, just like below
{quantity:10} // incorrect

While passing props from parent component, we only need to mention the prop name and pass a value after the equality operator, just like below

<Items quantity={10} /> // correct

Hope this helps. Feel free to ask if there is any other query.

4 Likes
5

How do you know when you are in parent component vs child component?

6

The component you are making changes in, is the parent component, the component which you are calling in your render method is the child component.

In other words, the class or component in which you are working right now is the parent component and the component which you are using in this parent component, is the child component.

In above example, ShoppingCart is the parent component and Items is the child component.

7

Hi Abdul - what are you using as a code editor?

8

Hey Chan, I am VS Code as Code Editor and I am loving it.

1 Like
9

I feel like this is wrong even though it worked

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

Items.defaultProps = {
  quantity: 10
}

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