Override Default Props

The ability to set default props is a useful feature in React. The way to override the default props is to explicitly set the prop values for a component.

The ShoppingCart component now renders a child component Items. This Items component has a default prop quantity set to the integer 0. Override the default prop by passing in a value of 10 for quantity.

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.


                             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 /> 
                                 { /* Change code above this line */ } 
                               } 
                             };

My Solution:


                             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 */ } 
                               } 
                             };

Tests:

The component ShoppingCart should render.
The component Items should render.
The Items component should have a prop of { quantity: 10 } passed from the ShoppingCart component.