title: TypeError: Cannot read properties of undefined (reading 'requestContent')
body: <p>I am facing the issue in my react application. <br/><br/><strong>TypeError: Cannot read properties of undefined (reading 'requestContent')</strong><br/><br/>
  I am using <strong>commercejs</strong> in my application. The code points to <strong>isEmpty=!cart.line_items.length;</strong>. When checked it shows the proper value. Furthermore, I have noticed that the Api returns NULL array twice and populated array the third time. Why is it so? Anyone there to help me sort this issue?</p>
  <p><strong>Cart.jsx</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { Container, Typography, Button, Grid } from &quot;@material-ui/core&quot;;
  
  import useStyles from &quot;./CartStyles&quot;;
  
  const Cart = ({ cart }) =&gt; {
    const classes = useStyles();
    console.log(&quot;CART &quot;,cart.line_items); 
    const isEmpty = !cart.line_items.length;
  
    const EmptyCart = () =&gt; {
      &lt;Typography variant=&quot;subtitle1&quot;&gt;
        You donot have any item in your shopping cart. Start adding some of the
        items in your shopping cart.
      &lt;/Typography&gt;;
    };
  
    const FilledCart = () =&gt; {
      &lt;&gt;
        &lt;Grid container spacing={3}&gt;
          {cart.line_items.map((item) =&gt; (
            &lt;Grid item xs={12} sm={4} key={item.id}&gt;
              &lt;div&gt;{item.name}&lt;/div&gt;
            &lt;/Grid&gt;
          ))}
          &lt;div className={classes.cartDetails}&gt;
            &lt;Typography variant=&quot;h4&quot;&gt;
              Subtotal: {cart.subtotal.formatted_With_symbol}
              &lt;div&gt;
                &lt;Button
                  className={classes.emptyButton}
                  size=&quot;large&quot;
                  type=&quot;button&quot;
                  variant=&quot;contained&quot;
                  color=&quot;secondary&quot;
                &gt;
                  Empty Cart
                &lt;/Button&gt;
                &lt;Button
                  className={classes.checkoutButton}
                  size=&quot;large&quot;
                  type=&quot;button&quot;
                  variant=&quot;contained&quot;
                  color=&quot;primary&quot;
                &gt;
                  Checkout
                &lt;/Button&gt;
              &lt;/div&gt;
            &lt;/Typography&gt;
          &lt;/div&gt;
        &lt;/Grid&gt;
      &lt;/&gt;;
    };
  
    return (
      &lt;Container&gt;
        &lt;div className={classes.toolbar} /&gt;
        &lt;Typography className={classes.title} variant=&quot;h3&quot;&gt;
          Your Shopping Cart
        &lt;/Typography&gt;
        {isEmpty ? &lt;EmptyCart /&gt; : &lt;FilledCart /&gt;}
      &lt;/Container&gt;
    );
  };
  
  export default Cart;
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  // import Products from &quot;./components/Products/Products&quot;;
  // import Navbar from &quot;./components/Navbar/Navbar&quot;;\
  import { commerce } from &quot;./lib/commerce&quot;;
  import { Products, Navbar, Cart } from './components';
  
  const App = () =&gt; {
      const [products, setProducts] = useState([]);
      const [cart, setCart] = useState({});
  
      const fetchProducts = async() =&gt; {
          // call the product api from commerce js
          const { data } = await commerce.products.list();
          // populates the products
          setProducts(data);
      }
  
      //get element of cart
      const fetchCart = async() =&gt; {
          const cartItems = await commerce.cart.retrieve();
          setCart(cartItems);
      }
  
  
      const handleAddToCart = async(productId, quantity) =&gt; {
          const itemsInCart = await commerce.cart.add(productId, quantity);
          setCart(itemsInCart.cart);
      }
  
      useEffect(() =&gt; {
          //Calling of methods which we want to call on load of component
          fetchProducts();
          fetchCart();
      }, []);
      //  empty array is given so that it makes a call as soon as component is loaded.
      console.log(cart);
      return ( &lt;
          div &gt;
          &lt;
          Navbar totalItems = { cart.total_items }
          / &gt;   &lt;
          Cart cart = { cart }
          /&gt; &lt; /
          div &gt;
      );
  };
  
  export default App;
  </code></pre>
  <p><strong>Error Screenshot</strong>
  <a href="https://i.stack.imgur.com/MlbUy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MlbUy.png" alt="enter image description here" /></a></p>