ReactJS passing array to compoent - undefined error

I have no idea why this is happening, I have followed many tutorials, even asked gpt. Something very weird is happening that I cannot see. Please help

import { SecondaryFooter } from '../Components/Footers/SecondaryFooter';
import ShowProducts from '../Components/Products/ShowProducts';
import { PrimarySidebar } from '../Components/Sidebars/PrimarySidebar';
import { PrimaryShoppingCart } from '../Components/Sidebars/PrimaryShoppingCart';
import PrimaryFooter from '../Components/Footers/PrimaryFooter'

import { Head } from '@inertiajs/inertia-react';

import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';

const items = [
    { id: 0, name: 'Apple Macbook Pro', price: 1999.99, img: 'storage/imgs/products/laptop.jpg', description: 'Description goes here.' },
    { id: 1, name: 'Apple Macbook Air', price: 1555.99, img: 'storage/imgs/products/laptop1.jpg', description: 'Description goes here.' },
    { id: 2, name: 'MSI Stealth GS66', price: 1200.99, img: 'storage/imgs/products/laptop2.jpg', description: 'Description goes here.' },
    { id: 3, name: 'Apple Macbook Pro', price: 1999.99, img: 'storage/imgs/products/laptop.jpg', description: 'Description goes here.' },
    { id: 4, name: 'Apple Macbook Air', price: 1555.99, img: 'storage/imgs/products/laptop1.jpg', description: 'Description goes here.' },
    { id: 5, name: 'MSI Stealth GS66', price: 1200.99, img: 'storage/imgs/products/laptop2.jpg', description: 'Description goes here.' },
    { id: 6, name: 'Apple Macbook Pro', price: 1999.99, img: 'storage/imgs/products/laptop.jpg', description: 'Description goes here.' },
    { id: 7, name: 'Apple Macbook Air', price: 1555.99, img: 'storage/imgs/products/laptop1.jpg', description: 'Description goes here.' },
    { id: 8, name: 'MSI Stealth GS66', price: 1200.99, img: 'storage/imgs/products/laptop2.jpg', description: 'Description goes here.' },
]

export default function Dashboard(props) {
    
    return (
        <AuthenticatedLayout
            auth={props.auth}
            errors={props.errors}
            header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Dashboard</h2>}
        >
            <Head title="Dashboard" />

            <div className="flex flex-row">
                <div className="w-full">

                    <ShowProducts items={items} />

                </div>
                <div className="basis-2/6 bg-gradient-to-t from-gray-700 via-gray-900 to-black hidden xl:block">
                    <PrimaryShoppingCart />
                </div>
            </div>

        </AuthenticatedLayout>
    );
}

import { PrimaryDisplayButton } from './PrimaryDisplayButton';
import { PrimaryOrderButton } from './PrimaryOrderButton';
import { PrimarySearchInput } from './PrimarySearchInput';
import { ShowProduct } from './ShowProduct';



import Dropdown from '../Dropdown';
import React, { useState } from "react";



export default function ShowProducts({ className, items }) {

    const handleAdd = function (id) {
        const newList = list.filter((obj) => obj.id !== id);
        setList(newList);
    };

    const [list, setList] = useState(items);

    return <div className={`${className}`}>
        <div className="flex gap-4 py-4 mr-6 mt-4">
            <p className="basis-7/12 text-4xl antialiased font-sans tracking-wide ml-12 mt-4 font-bold sm:block hidden xl:block">Products</p>
            <PrimarySearchInput className="w-full drop-shadow-lg ml-6" />
            <PrimaryOrderButton className="w-full drop-shadow-lg" />
        </div>


        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-7 p-6 ">
            {list.map((item) => (
                <ShowProduct key={item.id} name={item.name} img={item.img} />
            ))}

            {/* //  onClick={() => handleRemove(item.id)} */}

        </div>

    </div>;
}

Randy_Johnson

3 years ago

Level 8

It had something to do with the export default function. I should probably do a tutorial or something.

Randy_Johnson

3 years ago

Best Answer

Level 8

{list.map((item) => (
                <ShowProduct key={item.id} name={item.name} img={item.img} />
            ))}

Ha, I found the problem. After I deleted it all and re wrote it.... fml

Please or to participate in this conversation.