title: Displaying Multiple Properties of a component in React
body: <p>I'm a beginner, learning React using this tutorial as a guide > <a href="http://survivejs.com/webpack_react/implementing_notes/" rel="nofollow">http://survivejs.com/webpack_react/implementing_notes/</a></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>My best assumption is in item.jsx, it is only passing the product and not sku and price so how do I do that?</p>
  
  <pre><code> the export default ({product}) =&gt; &lt;div&gt;{product}&lt;/div&gt;;
  </code></pre>
  
  <p>This is how my components are layed out.
  APP Component > Lists Component > List Component</p>
  
  <p>App.jsx</p>
  
  <pre><code>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 (
        &lt;div&gt;
          &lt;button onClick={this.addItem}&gt;+&lt;/button&gt;
          &lt;Items items={items} /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Items.jsx</p>
  
  <pre><code>import React from 'react';
  import Item from './item.jsx';
  
  export default ({items}) =&gt; {
    return (
      &lt;ul&gt;{items.map(item =&gt;
        &lt;li key={item.id}&gt;
          &lt;Item 
            product={item.product} 
            sku={item.sku}
            price={item.price} /&gt;
        &lt;/li&gt;
      )}&lt;/ul&gt;
    );
  }
  </code></pre>
  
  <p>Item.jsx</p>
  
  <pre><code> export default ({product}) =&gt; &lt;div&gt;{product}&lt;/div&gt;;
  </code></pre>