Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

154
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!