1

I don't have any errors in the console, looks like i'm doing everything right but apparently not. Only when I click on the image a link, the id in the address bar doesn't appear, it says undefined.. I wasn't passing the key prop before so I added that so nothing happened. Also i made sure the images folder is in the public folder

HomeScreen.js:

import React from "react";
import products from "../../products";
import { Row, Col } from "react-bootstrap";
import Product from "../Product";

function HomeScreen() {
  return (
    <div>
      <h1 className="text-center">Latest Products</h1>
      <Row>
        {products.map((product) => (
          <Col key={product.id} sm={12} md={6} lg={4} xl={3}>
            {/* <h3>{product.name}</h3> */}
            <Product product={product} />
          </Col>
        ))}
      </Row>
    </div>
  );
}

export default HomeScreen;

Product.js:

import React from "react";
import { Card } from "react-bootstrap";

function Product(product) {
  return (
    <Card className="my-3 p-3 rounded">
      <a href={`/product/${product.id}`}>
        <Card.Img src={product.image} />
      </a>

      <Card.Body>
        <a href={`/product/${product._id}`}>
          <Card.Title as="div">
            <strong>{product.name}</strong>
          </Card.Title>
        </a>
        <Card.Text as="div">
          <div className="my-3">
            {product.rating} from {product.numReviews} reviews
          </div>
        </Card.Text>
        <Card.Text as="h3">$ {product.price}</Card.Text>
      </Card.Body>
    </Card>
  );
}

export default Product;

product.js:

// prettier-ignore
const products = [
  {
    "id": "1",
    "name": "Airpods Wireless Bluetooth Headphones",
    "image": "/images/airpods.jpg",
    "description": "Bluetooth technology lets you connect it with compatible devices wirelessly High-Quality AAC audio offers immense experience Built-in microphone allows you take calls while working",
    "brand": "Apple",
    "category": "Electronics",
    "price": 89.99,
    "coutInStock": 0,
    "rating": 4.5,
    "numReviews": 12,
  },
  {
    "id": "2",
    "name": "IPhone 11 Pro 256GB memory",
    "image": "/images/phone.jpg",
    "description": "Bluetooth technology lets you connect it with compatible devices wirelessly High-Quality AAC audio offers immense experience Built-in microphone allows you take calls while working",
    "brand": "Apple",
    "category": "Electronics",
    "price": 599.99,
    "coutInStock": 7,
    "rating": 4.0,
    "numReviews": 8,
  },
  {
    "id": "3",
    "name": "Cannon EOS 80D DSR Camera",
    "image": "/images/camera.jpg",
    "description": "Bluetooth technology lets you connect it with compatible devices wirelessly High-Quality AAC audio offers immense experience Built-in microphone allows you take calls while working",
    "brand": "Cannon",
    "category": "Eelectronics",
    "price": 929.99,
    "coutInStock": 5,
    "rating": 43,
    "numReviews": 12,
  },
  {
    "id": "4",
    "name": "Sony Playstation 4 Pro White Version",
    "image": "/images/playstation.jpg",
    "description": "The ultimate entertainment center starts with PLaystation. Wether you are into faming, HD movies, television or music",
    "brand": "Sony",
    "category": "Eelectronics",
    "price": 399.99,
    "coutInStock": 11,
    "rating": 5,
    "numReviews": 12,
  },
  {
    "id": "5",
    "name": "Logitech G-Series gaming Mouse",
    "image": "/images/mouse.jpg",
    "description": "Get a better handle on your games with this Ligoitech Lighstick gaming mouse. Th esicth proggamable buttons allow customization for a smooth playing experience.",
    "brand": "Logitech",
    "category": "Eelectronics",
    "price": 49.99,
    "coutInStock": 7,
    "rating": 3.5,
    "numReviews": 10,
  },
  {
    "id": "6",
    "name": "Amazon Echo Dot 23rd Generation",
    "image": "/images/alexa.jpg",
    "description": "Meet Echo Dot, our most popular smart speaker with a fabric design. It is our most compact smart speaker taht fits perfectly into small spaces.",
    "brand": "Amazon",
    "category": "Eelectronics",
    "price": 29.99,
    "coutInStock": 0,
    "rating": 0,
    "numReviews": 12,
  },
];

export default products;
Khaled
  • 43
  • 6
  • 1
    It looks like you meant to destructure in `Product`'s definition but forgot - the `product` variable you currently have is the whole props object, not the single `product` prop – CertainPerformance Nov 12 '22 at 17:29
  • Product.js contains an array of objects. There is no JSON here. Card.body tries to create a link using product._id, which doesn’t exist in your array. – James Nov 12 '22 at 17:30

0 Answers0