0

So i wanna display my cart item in the cart list, as i have set the initial state of cart to storeProducts, 8 of my products should be rendered as i'm using the map function. I haven't made the ui of my cartItem.js yet, but instead, i should have 8 lines of text as "this is a cart item" from my cartItem.js. Please help me to find out what's wrong with my codes! Thank you so much!

context.js:

class ProductProvider extends React.Component {
  state = {
    products: storeProducts,
    detailProduct: detailProduct,
    cart: storeProducts,
    modalOpen: false,
    modalProduct: detailProduct
  };

  getItem = (id) => {
    const product = this.state.products.find((item) => item.id === id);
    return product;
  };

  addToCart = (id) => {
    let tempProducts = [...this.state.products];
    const index = tempProducts.indexOf(this.getItem(id));
    const product = tempProducts[index];
    product.inCart = true;
    product.count = 1;
    const price = product.price;
    product.total = price;

    this.setState(() => {
      return (
        { products: tempProducts, cart: [...this.state.cart, product] },
        () => console.log(this.state)
      );
    });
  };

  openModal = (id) => {
    const product = this.getItem(id);
    this.setState(() => {
      return { modalProduct: product, openModal: true };
    });
  };

  closeModal = (id) => {
    this.setState(() => {
      return { modalOpen: false };
    });
  };

  render() {
    return (
      <ProductContext.Provider
        value={{
          ...this.state,
          addToCart: this.addToCart,
          openModal: this.openModal,
          closeModal: this.closeModal
        }}
      >
        {this.props.children}
      </ProductContext.Provider>
    );
  }
}

CartItem.js:

import React from "react";

function CartItem(item) {
  return <div>this is a cart item</div>;
}

export default CartItem;

CartList.js:

import React from "react";
import CartItem from "./CartItem"

export default function CartList (props) {
   const {cart} = props
    return (
      <div>
        {cart.map((item) => (
            <CartItem key={item.id} item={item} />
        ))}
      </div>
    )
}

Sandbox link:https://codesandbox.io/s/cart-code-addict-buz0u?file=/src/cart/CartList.js

na ha
  • 175
  • 1
  • 8

1 Answers1

0

https://codesandbox.io/s/cart-code-addict-forked-uonqs?file=/src/cart/CartList.js

There are lot of bugs. Context should be imported. Value.length was undefined. Please check the code again and see if data is flowing (Console.log everything to see if everything is as expected). Like props are getting the data. I have fixed cart item problem in the forked sandbox. Please check .

Siddharth Varangaonkar
  • 391
  • 2
  • 7
  • Well, thank you! but i have run into the same problem again, i was tryna fetch the value of the function and the value of the item to display in the cartItem but it isn't working, anything wrong with my params or anything? it'd be kind of you to help me! Sandbox link: https://codesandbox.io/s/cart-code-addict-forked-rrkuz?file=/src/cart/CartItem.js – na ha Dec 03 '21 at 06:48
  • I cannot see the functionalities or where the increment,decerment and removeitem function are implemented. Can you tell me where they exactly are defined in the code i.e their functionalities – Siddharth Varangaonkar Dec 03 '21 at 08:11
  • Please check this link:https://codesandbox.io/s/cart-code-addict-forked-rrkuz?file=/src/cart/CartItem.js – na ha Dec 03 '21 at 08:30
  • https://codesandbox.io/s/cart-code-addict-forked-g7f8d?file=/src/cart/CartItem.js. Does this help, now functions increment and decrement are available on CarItem – Siddharth Varangaonkar Dec 03 '21 at 09:54
  • yah, i think it helps but when i set the initial state of cart back to [ ] my product isn't displayed on the cart...anyway, thank you so much! – na ha Dec 03 '21 at 13:41