I'm putting together my first react as an exercise to understand but I get this error

599Item.js:12 Uncaught TypeError: product.map is not a function in component item.js on line 12

I copy the component item,js, it has a prop that is the product object

import React, {useState, useEffect} from "react";
import '../App.css';
import 'materialize-css/dist/css/materialize.css';
import Count from './ItemCount';

export const Item =(({product}) =>  {

  const [sellProduct, setSellProduct] = useState(product);

  useEffect(() => { 
    setSellProduct({product}); 
  }, [product]);

  const mensaje = () => {
    alert ('Gracias por su compra');
  }

return (
    <>
    {
      sellProduct.map((item) => {
        return(
          <Count stock={item.stock} onAdd ={mensaje} >
            <div id= {item.id}>
              <h3>{item.name}</h3> - <small>{item.category}</small>
              <img src= {item.picture} alt="Producto" className="itemImg" />
              <p>{item.description}</p>
              <p>{item.price}</p>
            </div>          
          </Count>
        )
      })
    }
    </>
  )
});

expor default Item;

I take the prop out in a fetch and pass it to the child component, which passes the prop to the items component and I copy the code of both

ItemListContainer(parent)

import React, { useEffect, useState } from "react";
import '../App.css';
import 'materialize-css/dist/css/materialize.css';  
import ItemList from './ItemList';


export const ItemListContainer =() =>  {


  
  const [swSell,setSwSell] = useState([])

  useEffect(() => {
    fetch('https://fakestoreapi.com/products')
      .then((res) => res.json())
      .then((data) => {
        setSwSell(data);
      })
      .catch((err) => {
        console.log(err);
      });
    }, []);

  return(
    <div className="parent">
      {
        swSell.map((item) =>(
          <div className="child" key={item.id}>
            <ItemList item={swSell} />
          </div>
        ))
      }
    </div>
    )}
export default ItemListContainer;

ItemList(child), this passes to the Item component

import React from "react";
import '../App.css';
import 'materialize-css/dist/css/materialize.css'; 
import Item from './Item';

export const ItemList = (({item}) =>  {
  return (
    <div className="child">
      {
        item.map((item) =>(
          <Item product= {item} />
        ))
      }
    </div>
  )
});

export default ItemList;

I appreciate your help

CodePudding user response：

In Item component instead of

product.map((item)...

replace it with

product && product.map((item)...

CodePudding user response：

The error:

product.map is not a function in react

arise since the product props that you set as sellProduct is not an array. It is actually an item (object) of swSell array.

So, first, change this:

const ComponentName = (({ ... }) => {
   ...
})

into this:

const ComponentName = ({ ... }) => {
   ...
}

Next, since the swSell state is a collection of item object where the item is the product itself, then you only need two component here: ItemList as parent and Item as the child that render the item details

const Item = ({item}) =>  {
    return (
        <div id= {item.id}>
             <h3>{item.name}</h3> - <small>{item.category}</small>
             <img src={item.image} width="100"/>
             <p>{item.description}</p>
             <p>{item.price}</p>
        </div> 
    )
};

function ItemList() {
    const [swSell,setSwSell] = React.useState([])

    React.useEffect(() => {
        fetch('https://fakestoreapi.com/products')
            .then((res) => res.json())
            .then((data) => {
                setSwSell(data);
            })
            .catch((err) => {
                console.log(err);
            });
    }, []);

    return (
        <div>
            {swSell.map((item) => (
                <div className="child" key={item.id}>
                    <Item item={item} />
                </div>
            ))}
        </div>
    );
}

ReactDOM.render(<ItemList />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>