TypeError: Cannot read property 'cartItems' of undefined

render() {

    const { cartItems } = this.props.data.cartItems.map((item, index) => {

      return (

        <Fruits

          key={index}

          item={item}

          indexInCart={index}

          removeFromCart={this.props.removeFromCart}

          updateAmountToPay={this.updateAmountToPay}

        />

      );

    });

That is telling you that this.props.data is undefined. On the first line of the render method, can you console.log this.props and see what you are getting?

Is data being passed into this component or is it coming from an HOC, like redux?

Thank You Smith…

I take that back - I didn’t look closely enough. The issue may not be here:

= this.props.data.cartItems

but here:

 const { cartItems } =

If the right side of that equation is returning undefined, then that could happen. Also, it’s unclear to me why you are destructuring that like it is an object when map returns an array. Also, why are you mapping if you only want one value?

This is a very confusing piece of code to me. What are you trying to do here?

this is the total code … once check

// OVERLAY OF CART

import React from "react";

import "./Cart.css";

import Fruits from "../Fruits";

import CloseIcon from "@material-ui/icons/Close";

export default class Cart extends React.Component {

  state = { count: 0 };

  constructor(props) {

    super(props);

   

  }

  closeOverlay = () => {

    document.getElementById("overlay").style.display = "none";

    document.querySelector("body").style.overflow = "auto";

  };

  updateAmountToPay = (item) => {

    this.forceUpdate();

  };

  render() {

    const { cartItems } = this.props.cartItems.map((item, index) => {

      return (

        <Fruits

          key={index}

          item={item}

          indexInCart={index}

          removeFromCart={this.props.removeFromCart}

          updateAmountToPay={this.updateAmountToPay}

        />

      );

    }); 

    let amountToPay = 0;

    for (let i = 0; i < this.props.items.length; i++) {

      amountToPay +=

        this.props.data.items[i].price *

        this.props.data.items[i].quantityInCart;

    }

    return (

      <div id="overlay">

        <section id="shopping-cart">

          <div id="cart-header">

            <span id="cart-title">Shoppingcart</span>

            <CloseIcon onClick={() => this.closeOverlay} />

          </div>

          <table>

            <thead>

              <tr>

                <th>Product</th>

                <th>Name</th>

                <th>Price</th>

                <th>Quantity</th>

                <th>Total</th>

                <th></th>

              </tr>

            </thead>

            <tbody>{cartItems}</tbody>

          </table>

          <span id="empty-cart">

            {cartItems.length === 0 ? "Shopping cart is empty " : ""}

          </span>

          <h3 id="cart-total">Cart Total</h3>

          <div id="totals">

            <span>Cart Totals</span>

            <span>Number of items: {this.props.data.quantity}</span>

            <span>Total: {amountToPay}</span>

          </div>

          <button

            id="checkout"

            disabled={cartItems.length === 0 ? true : false}

          >

            Checkout

          </button>

        </section>

      </div>

    );

  }

}

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

im not able to do that … becoz there is lot od ode to edit …
So, please check my total code that is posted and give me the solution.
and thanks for youer fast replies

I also get nervous when I see things like:

  closeOverlay = () => {
    document.getElementById("overlay").style.display = "none";
    document.querySelector("body").style.overflow = "auto";
  };

In React, you shouldn’t reference the DOM directly. These should be conditional styles or classes in your JSX.

Also, that constructor doesn’t need to be there.

im not able to do that … becoz there is lot od ode to edit …
So, please check my total code that is posted and give me the solution.
and thanks for youer fast replies

What is the “that” in that first sentence? You can’t add a console.log? That’s adding one line.

I understand that you can’t necessarily show all of the code, but you at least need to find out what props are getting into this component or at least see where this component is used so we can see what is being passed to it.

And you still need to explain what you hope to accomplish with:

const { cartItems } = this.props.cartItems.map(...

The map will return an array (which you promptly abandon) and you are trying to destructure an object property off of that array. Why? This piece of code doesn’t make sense to me.