I am working on an ecommerce app using React(create-react-app). I am currently working on the product detail page. My issue is that the image won’t render on the website but the rest of the information on inside the return statement rendered. I have no errors on web dev tools, the app compiled successfully. Here is the code…
ProductScreen.js
import React from 'react';
import data from '../data';
import Rating from '../components/Rating';
import { Link, useParams } from 'react-router-dom';
function ProductScreen() {
const { id } = useParams();
// const params = useParams();
// const { id: productId } = params;
const product = data.products.find((x) => x._id === (id));
if (!product) {
return <div> Product Not Found </div>;
}
return (
<div>
<Link to="/">Back To Result</Link>
<div className="row top">
<div className="col-2">
<img className="large" src={product.image} alt={product.name} ></img>
</div>
The Main page did render all the images though. Just very confuse as I am new to React. Not sure how to find the issue especially when there is no error showing.