this.props react training Question - CodeAcademy - reactjs

Question

I'm going through CodeCademy React beginner training. I just finished a short chapter on props and passing props, and I'm still very confused on the topic and wanted to do some more reviewing on this. CodeCademy had the below question as a "quiz", I submitted my answer - it told me it was wrong and didn't give me an explanation or solution.
Could someone please answer this question for me and maybe provide me a good guide to review the react props.
Question: Pass in the item, quantity, price of an item as props from the App component to the shopping cart component. These values will be rendered within the corresponding list elements. The item prop should contain the string “Apple”, the quantity prop should contain the number 3, and the price prop should contain the number 1.99.
import React from 'react';
import ReactDOM from 'react-dom';
export class App extends React.Component {
render() {
return (
<ShoppingCart />
);
}
}
export class ShoppingCart extends React.Component {
render() {
return <ul>
<li>Item: {this.props.item}</li>
<li>Quantity: {this.props.quantity}</li>
<li>Price: {this.props.price}</li>
</ul>;
}
Thank you

Answer 1

If I understand well, the shopping cart should expect an array of items, ie: <ShoppingCart items={[]} />. Then inside the shopping cart, you map over the received items.
Then, I think the excepted answer should look like this:
import React from 'react';
export class App extends React.Component {
render() {
return (
<ShoppingCart items={[{ item: 'Apple', quantity: 3, price: 1.99 }]} />
);
}
}
export class ShoppingCart extends React.Component {
render() {
return (
<div>
{this.props.items.map(item => (
<ul key={JSON.stringify(item)}>
<li>Item: {item.item}</li>
<li>Quantity: {item.quantity}</li>
<li>Price: {item.price}</li>
</ul>))
}
</div>
);
}

Answer 2

You are not passing the props to the ShoppingCart component when trying to render it from App class.
do the below, to correct it
export class App extends React.Component {
render() {
return (
<ShoppingCart item="Apple" quantity={3} price={1.99} />
);
}
}