Displaying Multiple Properties of a component in React - reactjs

Question

I'm a beginner, learning React using this tutorial as a guide > http://survivejs.com/webpack_react/implementing_notes/
I'm having trouble understanding and figuring out how to make a shopping list with product name, sku, and price as the properties. I know how to pass one property from the tutorial, but multiple properties of a component i'm not sure what I'm doing wrong.
My problem is only the product name is showing on the page. I need the sku and price to show as well, but not understanding how those are not being passed along.
My best assumption is in item.jsx, it is only passing the product and not sku and price so how do I do that?
the export default ({product}) => <div>{product}</div>;
This is how my components are layed out.
APP Component > Lists Component > List Component
App.jsx
import uuid from 'node-uuid'
import React from 'react';
import Items from './Items.jsx';
export default class APP extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [
{
id: uuid.v4(),
product: 'apples',
sku: '1234',
price: '23.99'
},
{
id: uuid.v4(),
product: 'oranges',
sku: '2345',
price: '24.99'
},
{
id: uuid.v4(),
product: 'strawberries',
sku: '3456',
price: '25.99'
}
]
};
}
render() {
const items = this.state.items;
return (
<div>
<button onClick={this.addItem}>+</button>
<Items items={items} />
</div>
);
}
}
Items.jsx
import React from 'react';
import Item from './item.jsx';
export default ({items}) => {
return (
<ul>{items.map(item =>
<li key={item.id}>
<Item
product={item.product}
sku={item.sku}
price={item.price} />
</li>
)}</ul>
);
}
Item.jsx
export default ({product}) => <div>{product}</div>;

Answer 1

You are correctly passing the properties along - You can see this in your Items.jsx file here:
<Item
product={item.product}
sku={item.sku}
price={item.price}
/>
However, in your Item.jsx file, you're not printing the properties out. It may be a little easier to understand if you write your Item.jsx file as your have written your App.jsx file:
export default class Item extends React.Component {
render() {
return (
<div>
{this.props.product}, {this.props.sku}, {this.props.price}
</div>
)
}
}
Instead of passing it as a param of a function, you can reference the properties you pass in using this.props.{propName} - it's a more widely used way of writing React components, and it looks like the tutorial you're using goes on to using React props a little further down the page.

Answer 2

You're using a stateless function component, which is a function that receives props as a parameter. You can actually write it like this:
export default (props) => (
<div>
<span>{ this.props.product }</span>
<span>{ this.props.sku }</span>
<span>{ this.props.price }</span>
</div>;
);
However, since ES6 supports destructuring assignment on objects, we can assign the props object properties to variables:
export default ({ product, sku, price }) => (
<div>
<span>{ product }</span>
<span>{ sku }</span>
<span>{ price }</span>
</div>;
);