How to display objects in react?

Question

I'm trying to display a list of products on a react app. I made an array of objects in a separate file, I imported the file in the function file, I applied array.map and it is not working. I am also getting a list of errors in the console. Some of them, are because I use wrong imports and exports but I looked again and everything seems alright. Anybody can give me a tip? https://github.com/burNN11/Project

error

Answer 1

you must edit three files, I hope to copy these files to your project:

App.js:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import data from "./components/data/Data";
import Header from "./components/Header/Header";
import Cart from "./components/Cart";
import Signup from "./components/Signup";
import Products from "./components/Products";
import Contactus from "./components/Contactus";

console.log("data: ", data.productItems);

const App = () => {
  return (
    <Router>
      <Header />
      <Routes>
        <Route path="/" element={<Products data={data} />} />
        <Route path="/cart" element={<Cart />} />
        <Route path="signup" element={<Signup />} />
        <Route path="contactus" element={<Contactus />} />
      </Routes>
    </Router>
  );
};

export default App;

products.js:

import React from "react";

const Products = (ProductItems) => {
  console.log("......", ProductItems.data.productItems);
  return (
    <div className="products">
      {ProductItems?.data?.productItems?.map((productItem) => (
        <div key={productItem.id}>
          <img
            className="product-image"
            src={productItem.image}
            alt={productItem.name}
          />
        </div>
      ))}
    </div>
  );
};

export default Products;

Data.js:

const data = {
  productItems: [
    {
      id: "1",
      name: "Classic Hamburger",
      price: 30,
      image: "public/pics/hamburger.jpg",
    },
    {
      id: "2",
      name: "American Cheesburger",
      price: 30,
      image: "public/pics/cheeseburger.jpg",
    },
    {
      id: "3",
      name: "Spaghete Carbonara",
      price: 35,
      image: "public/pics/carbonara.jpg",
    },
    {
      id: "4",
      name: "Spaghete Milanese",
      price: 40,
      image: "public/pics/milanese.jpg",
    },
    {
      id: "5",
      name: "Spaghete Bolognese",
      price: 40,
      image: "public/pics/bolognese.jpg",
    },
    {
      id: "6",
      name: "Tiramisu",
      price: 25,
      image: "public/pics/tiramisu.jpg",
    },
    {
      id: "7",
      name: "Papanasi",
      price: 25,
      image: "public/pics/papanasi.jpg",
    },
    {
      id: "8",
      name: "Fanta",
      price: 5,
      image: "public/pics/fanta.jpg",
    },
    {
      id: "9",
      name: "Cola",
      price: 5,
      image: "public/pics/cola.png",
    },
  ],
};

export default data;

Answer 2

In the product component, you are accepting props but I don't see from where are you passing them. Could you try using the data present in your data.js file without expecting props in product component?

Answer 3

Why you just import directly the array of objects like this?

const productItems = [
  {
    id: "1",
    name: "Classic Hamburger",
    price: 30,
    image: "public/pics/hamburger.jpg"
  },
  {
    id: "2",
    name: "American Cheesburger",
    price: 30,
    image: "public/pics/cheeseburger.jpg"
  },
  {
    id: "3",
    name: "Spaghete Carbonara",
    price: 35,
    image: "public/pics/carbonara.jpg"
  },
  {
    id: "4",
    name: "Spaghete Milanese",
    price: 40,
    image: "public/pics/milanese.jpg"
  },
  {
    id: "5",
    name: "Spaghete Bolognese",
    price: 40,
    image: "public/pics/bolognese.jpg"
  },
  {
    id: "6",
    name: "Tiramisu",
    price: 25,
    image: "public/pics/tiramisu.jpg"
  },
  {
    id: "7",
    name: "Papanasi",
    price: 25,
    image: "public/pics/papanasi.jpg"
  },
  {
    id: "8",
    name: "Fanta",
    price: 5,
    image: "public/pics/fanta.jpg"
  },
  {
    id: "9",
    name: "Cola",
    price: 5,
    image: "public/pics/cola.png"
  }
];

export default productItems;

and then in wherever you what the data you do this:

import data from "./Data/data.js";

export default function Products() {
  return (
    <div className="products">
      {data?.map((productItem) => (
        <div key={productItem.id}>
          <img
            className="product-image"
            src={productItem.image}
            alt={productItem.name}
          />
        </div>
      ))}
    </div>
  );
}