title: ReactJS -- TypeError: Cannot read property 'name' of undefined
body: <p>I have App.js with products and cart.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import ProductGrid from './components/ProductGrid';
  import CartTable from './components/CartTable';
  import { fetchProducts } from './state/product/actions';
  import { fetchCart } from './state/cart/actions';
  
  class App extends Component {
    componentDidMount() {
      this.props.fetchProducts();
      this.props.fetchCart();
    }
  
    render() {
      const {
        isProductLoading,
        products,
        cart,
      } = this.props;
  
      if(isProductLoading) {
        return &lt;h2&gt;loading...&lt;/h2&gt;
      }
  
      return (
        &lt;div&gt;
          &lt;h1&gt;Shop application!&lt;/h1&gt;
          &lt;ProductGrid
            products={products}
          /&gt;
          &lt;h1&gt;Cart&lt;/h1&gt;
          &lt;CartTable
            cart={cart}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const getProductById = (products, productId) =&gt; products.find(p =&gt; p._id === productId);
  
  const populateCartItems = (c, p) =&gt; ({
    ...c,
    items: c.items.map(i =&gt; ({
      ...i,
      product: getProductById(p, i.productId),
    })),
  });
  
  const mapStateToProps = (state) =&gt; ({
    isProductLoading: state.product.isLoading,
    products: state.product.products,
    cart: populateCartItems(state.cart.cart, state.product.products),
  });
  
  const mapDispatchToProps = {
    fetchProducts,
    fetchCart,
  };
  
  
  export default connect(mapStateToProps, mapDispatchToProps)(App);
  </code></pre>
  
  <p>Problem is with the populate of cart and products objects.</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import styled from 'styled-components';
  
  const Wrapper = styled.table`
    width: 100%;
    border-collapse: collapse;
  
    td, th {
      border: 1px solid #DDD;
      padding: 8px;
      text-align: left;
    }
  
    tr:nth-child(even) {
      background: #DDD;
    }
  `;
  
  const CartTable = ({ cart }) =&gt; (
  
    &lt;Wrapper&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Item Name&lt;/th&gt;
          &lt;th&gt;Item Price&lt;/th&gt;
          &lt;th&gt;Item Quantity&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        {cart.items.map(item =&gt; (
          &lt;tr key={item.productId}&gt;
            &lt;td&gt;{item.product.name}&lt;/td&gt;
            &lt;td&gt;{}&lt;/td&gt;
            &lt;td&gt;{item.quantity}&lt;/td&gt;
          &lt;/tr&gt;
        ))}
      &lt;/tbody&gt;
    &lt;/Wrapper&gt;
  );
  
  CartTable.propTypes = {
    cart: PropTypes.shape({
      items: PropTypes.arrayOf(PropTypes.shape({
        product: PropTypes.shape({
          name: PropTypes.string.isRequired,
          price: PropTypes.number.isRequired,
        }).isRequired,
        productId: PropTypes.string.isRequired,
        quantity: PropTypes.number.isRequired,
      })).isRequired,
    }).isRequired,
  };
  
  export default CartTable;
  </code></pre>
  
  <p>When passing cart object to CartTable, I get error:</p>
  
  <p>TypeError: Cannot read property 'name' of undefined</p>
  
  <pre><code>  30 | &lt;tbody&gt;
    31 |   {cart.items.map(item =&gt; (
    32 |     &lt;tr key={item.productId}&gt;
  &gt; 33 |       &lt;td&gt;{item.product.name}&lt;/td&gt;
    34 |       &lt;td&gt;{}&lt;/td&gt;
    35 |       &lt;td&gt;{item.quantity}&lt;/td&gt;
    36 |     &lt;/tr&gt;
  </code></pre>
  
  <p>I'm quite sure the cart object is working fine in App.js (tested with console.log) but after it has passed to CartTable, populated product object is not found. </p>