TypeError: Cannot destructure property 'name' of 'item' as it is undefined

Question

** I can't figure out the problem here. Can anyone help me please ** When I pass item as props I got TypeError: Cannot destructure property 'name' of 'item' as it is undefined.

ProductsPage.js

...

const ProductsPage = ({ products, currentUser }) => {
  ..... 
  // note: products is an array with objects of product each product has id, name, image and price

  return (
    <div className="products-page">
      ....
      ..
      <div className="products-page__content">
        {filteredProducts.map((item) => ( // I try to console.log(item) and I get whole object
          <Product key={item.id} item={item} />
        ))}
      </div>
    </div>
  );
};

........

Product.js

function Product({ item, addItem }) {
  const { name, price, image } = item;

  return (
    <article className="product">
      <Link to="/products/" className="product__searchbox">
        <BiSearch className="product__search-icon" />
      </Link>
      <img src={image} alt={name} className="product__img" />
      <div className="product__footer">
        <h4 className="product__title">{name}</h4>
        <span className="product__price">
          {new Intl.NumberFormat("de-DE", {
            style: "currency",
            currency: "EUR",
          }).format(price)}
        </span>
      </div>
      <CustomButton inverted onClick={() => addItem(item)}>
        Add to Cart
      </CustomButton>
    </article>
  );
}

....

Answer 1

This is a common issue where data is passed down from a parent. Provide a default for your item:

function Product({ item, addItem }) {
  const { name, price, image } = item || {};

  ....

Answer 2

Item is undefined, it's not in the object supplied to Product(). So then when you try to get name from item, js chokes and gives you that error.

Try this code:

const myCoolThing = {foo: {cats: 11};
const { foo } = myCoolThing;
const { cats } = foo;
console.log(cats);

const { bar } = myCoolThing;
const { dogs } = bar; // Look! It's your error.
console.log(dogs);

In your case, you are iterating over a list of filtered products. It's likely that at least one of the elements in the list is undefined. The filtering process is probably setting indices to undefined instead of splicing the array to remove the index.

Answer 3

This is a common issue where data is passed down from a parent. Provide a default for your item:

function Product({ item, addItem }) { const { name, price, image } = item || {}; this worked for me

Answer 4

Item is undefined because it is not in the object supplied to Provider(). so javaScript returns an error when you try to get the items.

To solve the error provide a fallback when destructuring the property, e.g. const {name} = undefined || {};

the logical OR (||) operator, which returns the value to the right if the value to the left is falsy (e.g. undefined).

function Product({ item, addItem }) {
   const { name, price, image } = item || {};

........