Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

159
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda