I am creating an e-commerce website, I want to make a feature, where if the user clicks on a particular product, the user should be able to see the product details of that particular product. I want to implement this in react js with react-router dom, how should I pass the id and show the details of the particular product
Product.jsx
import React, { useState } from 'react'
// import Button from '@mui/material/Button';
import HotelData from "../src/HotelData.json"
import Icons from './components/Icons';
import Subscribe from '../src/components/Subscribe.jsx';
import { Link } from 'react-router-dom';
const Hotel = () => {
return (
<>
<section className='product'>
<div className='container'>
<div className='row'>
{HotelData.product.map((value) => {
return (
<React.Fragment key={value.id}>
<div className='col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 '>
<div className='cards'>
<Link data-item-id={value.id} to={`/product/${value.id}`} >
<img src={value.img} alt="" />
</Link>
<div className='product-img-badges'>
<span className='pink'>{value.discount}</span>
<span className='purple'>{value.type}</span>
</div>
<div className='description'>
<div className='product-content-3'>
<p>{value.Text}</p>
<h6>{value.price} <del>{value['del-price']}</del></h6>
<div className="icon">
<Icons />
</div>
{/* <Button variant="contained">Contained</Button> */}
</div>
</div>
</div>
</div>
</React.Fragment>
)
})}
</div>
</div>
</section>
<Subscribe />
</>
)
}
export default Hotel
ProductDetails.jsx
import React, { useState } from 'react'
import HotelData from '../HotelData.json'
import Rating from '@mui/material/Rating';
import Stack from '@mui/material/Stack';
import Addcart from './Addcart';
import FacebookIcon from '@mui/icons-material/Facebook';
import SportsVolleyballIcon from '@mui/icons-material/SportsVolleyball';
import PinterestIcon from '@mui/icons-material/Pinterest';
import TwitterIcon from '@mui/icons-material/Twitter';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
const ProductDetails = () => {
return (
<>
<section className='product_details'>
<div className=' container'>
<div className='row'>
<div className='top'>
<a href="/">Home</a>
<span> /</span>
<span to="product">SHOP PRODUCT</span>
</div>
{HotelData.productdetails.map((value) => {
return (
<React.Fragment key={value.id}>
<div className='d-flex gap-5 align-items-center'>
<div className='img'>
<img data-itemID={value.id} className='default-img' src={value.img} alt="" />
</div>
<div className='details'>
<h6>{value.Text}</h6>
<p>{value.price} <span>{value.delprice}</span></p>
<Stack spacing={1}>
<Rating name="half-rating" defaultValue={3} precision={0.5} />
</Stack>
<div className='del'>
<p>{value.details}</p>
</div>
<div className='add_cart'>
<Addcart />
</div>
<div className='categories'>
<h6>{value.cat}</h6>
<h6>{value.tag}</h6>
</div>
<div className='product-icon'>
<ul>
<li><a href="facebook"><FacebookIcon></FacebookIcon></a></li>
<li><a href="facebook"><SportsVolleyballIcon></SportsVolleyballIcon></a></li>
<li><a href="facebook"><PinterestIcon></PinterestIcon></a></li>
<li><a href="facebook"><TwitterIcon></TwitterIcon></a></li>
<li><a href="facebook"><LinkedInIcon></LinkedInIcon></a></li>
</ul>
</div>
</div>
</div>
</React.Fragment>
)
})}
</div>
</div>
</section>
</>
)
}
export default ProductDetails
App.js
import React from 'react';
import '../src/css/style.css'
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import NavbarMain from './components/Navbar';
import Home from './pages/Home';
import About from './pages/About';
import Collection from './pages/Collection';
import Blog from './pages/Blog';
import Contact from './pages/Contact';
import { Route, Routes } from 'react-router-dom';
// import Footer from './components/Footer';
import Footernew from './components/Footernew';
import ProductDetails from './components/Product-Details';
// import Loader from './components/Loader';
function App() {
return (
<>
{/* <Loader /> */}
<NavbarMain />
<Routes>
<Route exact path='/' element={<Home />} />
<Route exact path='/Home' element={<Home />} />
<Route exact path='/about' element={<About />} />
<Route exact path='/collection' element={<Collection />} />
<Route exact path='/product/' element={<ProductDetails />} />
<Route exact path='/blog' element={<Blog />} />
<Route exact path='/contact' element={<Contact />} />
</Routes>
<Footernew />
</>
);
}
export default App;
This are some screenshot
Here you can see we can see the id after hovering the product
But we cannot get the details of a particular product id after clicking on the product
How can I show the details of a single product on another page? Pls help me I am stuck on this issue
