Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

151
Visualizações
Line 27:15: 'item' is not defined no-undef

when i add product in cart there is nothing displayed in car and "items not found" error is displayed on the screen and when i try to use null check and npm start then error is not shown but still balnk page is displayed.

import React  from 'react';
import Header from './Front/Header/Header';

const Cart = ({ cartitems ,handleAddProduct,handleRemoveProduct} ) => {

  return (
    <>
<Header />
        <div className="cart-items">
          <div className="cart-items-header"> cartitems</div>
          {!cartitems?.length ? (
            <div className="cart-items-empty"> No items added in cart</div>
          ) : null}
          <div>
            {cartitems?.length ? cartitems.map((item,name ,price ,image ,id) => (
              <img
                key={item.id}
                className="cart-items-image"
                src={item.image}
                alt={item.name}
              />
            )) : null}
          </div>
          <div>
  
            <h3 className='cart-items-name'>
             {item.name}</h3>
          </div>
          <div className='cart-items-function'>
           
          <button className='cart-items-add' onClick={() =>handleAddProduct(item)}>
             +
         </button>
         <button
           className='cart-items-remove' onClick={()=>handleRemoveProduct(item)}>
            -
         </button>
          </div>
          <div
            className='cart-items-price'>
            {item.quantity}* ${item.price}
          </div>
        </div>
      </>
  );
}

export default Cart;
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

I think there are 2 problems in your code :

  • Firstly, I suppose that each item in your cartitems has the following structure :

    item = { id: 1, name: "my item", price: 2, image: "http://mybeautifulurl.org/image.png" }

If that is the case, you should pass item as the only argument in the map function, and access each props with item.id, item.name, item.price and item.image.

  • Some of your code is not in the map function but needs the item, so it cannot display anything.

Here is your updated code :

import React from "react";
import Header from "./Front/Header/Header";

const Cart = ({ cartitems, handleAddProduct, handleRemoveProduct }) => {
  return (
    <>
      <Header />
      <div className="cart-items">
        <div className="cart-items-header"> cartitems</div>
        {!cartitems?.length ? (
          <div className="cart-items-empty"> No items added in cart</div>
        ) : null}
        <div>
          {cartitems?.length
            ? cartitems.map((item) => (
                <>
                  <img
                    key={item.id}
                    className="cart-items-image"
                    src={item.image}
                    alt={item.name}
                  />
                  <div>
                    <h3 className="cart-items-name">{item.name}</h3>
                  </div>
                  <div className="cart-items-function">
                    <button
                      className="cart-items-add"
                      onClick={() => handleAddProduct(item)}
                    >
                      +
                    </button>
                    <button
                      className="cart-items-remove"
                      onClick={() => handleRemoveProduct(item)}
                    >
                      -
                    </button>
                  </div>
                  <div className="cart-items-price">
                    {item.quantity}* ${item.price}
                  </div>
                </>
              ))
            : null}
        </div>
      </div>
    </>
  );
};

export default Cart;

Let me know if this solves the problem :)

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda