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;