3.2 KiB
3.2 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d403616c | Override Default Props | 6 | false |
Description
Instructions
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.
Tests
tests:
- text: The component <code>ShoppingCart</code> should render.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })(), 'The component <code>ShoppingCart</code> should render.');
- text: The component <code>Items</code> should render.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').length === 1; })(), 'The component <code>Items</code> should render.');
- text: "The <code>Items</code> component should have a prop of <code>{ quantity: 10 }</code> passed from the <code>ShoppingCart</code> component."
testString: "getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').props().quantity == 10 && getUserInput('index').replace(/ /g,'').includes('<Itemsquantity={10}/>'); })(), 'The <code>Items</code> component should have a prop of <code>{ quantity: 10 }</code> passed from the <code>ShoppingCart</code> component.');"
Challenge Seed
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 */ }
}
};
After Test
ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
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 */ }
}
};