Something seems to be going wrong with the Product.js file. This is where I am encountering an error related to finding the ID of the product that is being clicked on from data.js. The issue appears to be in the title section, and I'm struggling to figure out why the data is not being retrieved from data.js. Can someone offer assistance?
import React from 'react';
import data from '../data';
import { Link } from 'react-router-dom';
function Product(props) {
console.log(props.match.params.id);
const product = data.bags.find(x => x._id === props.match.params.id);
return <div>
<div className="back-to-result">
<Link to="/">Back to result</Link>
</div>
<div className="details">
<div className="details-image">
<img src={product.image} alt="product" /> // this is where the error occurs
</div>
<div className="details-info">
<ul>
<li>
<h4>{product.brand}</h4>
</li>
<li>
{product.name}
</li>
<li>
{product.ratings} Stars ({product.reviews} Reviews)
</li>
<li>
Price: <b>₹{product.price}</b>
</li>
<li>
Description:
<div>
{product.description}
</div>
</li>
</ul>
</div>
<div className="details-action">
<ul>
<li>
Price: ₹{product.price}
</li>
<li>
Status: {product.status}
</li>
<li>
Qty: <select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</li>
<li>
<button className="button">Add to cart</button>
</li>
</ul>
</div>
</div>
</div>
}
export default Product;
I should be getting the required data from data.js as this is the Redux store where all the necessary data has been stored.
export default {
bags: [
{
_id: '1',
category: 'watch',
name: "Bags",
brand: "Hublot",
price: 8000,
image: "/images/1.jpg",
ratings: 4.5,
reviews: 10
},
{
_id: '2',
category: 'bags',
name: "Watch",
brand: "Ulysse Nardin",
price: 10000,
image: "/images/2.jpg",
ratings: 3.5,
reviews: 12
},
{
_id: '3',
category: 'bags',
name: "Watch",
brand: "Tissot",
price: 4000,
image: "/images/3.jpg",
ratings: 5,
reviews: 24
},
{
_id: '4',
category: 'sunglasses',
name: "Watch",
brand: "Hublot",
price: 8000,
image: "/images/1.jpg",
ratings: 1.4,
reviews: 42
},
{
_id: '5',
category: 'bags',
name: "Watch",
brand: "Ulysse Nardin",
price: 10000,
image: "/images/2.jpg",
ratings: 3.7,
reviews: 14
},
{
_id: '6',
category: 'watch',
name: "Watch",
brand: "Tissot",
price: 4000,
image: "/images/3.jpg",
ratings: 4,
reviews: 17
}
]
}