-1

I am trying to display my data from an array. The array comes from a reducer. I wanted to do it using the .map method but there is an error (at produit.map). I don't know why but it returns me "Uncaught Error: Objects are not valid as a React child". The console tell me too that they found Objects with keys. Can someone help me please?

const LastProduit = () => {

const dispatch = useDispatch();

const step = 3;
const [count, setCount] = useState(step);

useEffect(() => {
    dispatch(getProduit());
}, [dispatch,]);

const { height, width } = useWindowDimensions();

const produits = useSelector((state) => state.produitReducer);
const produitsArray = produits;
const RealProduitArray = produitsArray[0];
console.log(produits);

console.log(RealProduitArray);
//console.log(RealProduitArray[0].titre);
const a = [produits];
const b = 1 + produits.length
for (let i = 0; i < b; i++) {
    return a[i];
}

let screenwidth = { width };
let nbr = 0;
let nbrspace = 0;
let valeur = "true";
console.log(screenwidth.width);


if (screenwidth.width <= 768) { nbr = 2; nbrspace = -60; valeur = "false" }
else { nbr = 4; nbrspace = -170; }

return (
    <div className='LastProduit'>
        <p className='categories_titre'>Derniers Produits  </p>
        <div className='LastProduit_img'>
            <Swiper modules={[Navigation, Pagination, Scrollbar, A11y]}
                spaceBetween={nbrspace}
                slidesPerView={nbr}
                navigation
                pagination={{ clickable: true }}
                scrollbar={{ draggable: true }}
                onSwiper={(swiper) => console.log(swiper)}
                onSlideChange={() => console.log('slide change')}
            >

                {produits.map((produit) => 
                    <SwiperSlide>
                       <Produit produit={produit} key={produit._id} />
                    </SwiperSlide>

                )}


            </Swiper>

        </div>

    </div>

);

};

tonylebarbare0
  • 1
  • 1

1 Answers1

-1

Your map function needs a return statement. In multi-line callback functions you have to include the return keyword.

Example:

{ 
    produits.map((produit) => {
        return (
            <SwiperSlide>
                <Produit produit={produit} key={produit._id} />
            </SwiperSlide>
        )
    }) 
}
Willey Ohana
  • 317
  • 1
  • 9