Need Help with a ReactJS e-commerce test website
Tags: react
Published: 2022-08-23 17:59:40


Working on my first reactjs e-commerce project for practice and I don't know how to get the images, product names of the products to show after the product has been clicked.

This is the App.js file
import { Routes,Route } from "react-router-dom";
import About from "./Components/About";
import Contact from "./Components/Contact";
import FeaturedProduct from "./Components/FeaturedProduct";
import Footer from "./Components/Footer";
import Home from "./Components/Home";
import Navbar from "./Components/Navbar";
import NoPage from "./Components/NoPage";
import ProductDetails from "./Components/ProductDetails";










function App() {
return (
< >



<Navbar/>
<Routes>
<Route path="/" exact element={<Home/>}></Route>
<Route index element={<Home/>}></Route>
<Route path="/about" element={<About/>}></Route>
<Route path="/contact" element={<Contact/>}></Route>
<Route path="/productdetails/:id/*" element={<ProductDetails/>}></Route>
<Route path="/FeaturedProduct" element={<FeaturedProduct/>}></Route>
<Route path="*" element={<NoPage/>}></Route>
</Routes>
<Footer/>
</>
);
}

export default App;

This the Products.js page

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import {data,lol} from '../Services/Products'

    
const Products = () => {









return (
<>
<div className='grid-container'>



<div className="card">
<Link to={`/productdetails/Apple`}>
<img  style={{width:'65%'}} src={data.imageUrl} alt='...'/>
</Link>
<div className='card-content'>
<h3 className="card-catogory">{data.category}</h3>
<div className="card-title">{data.ProductTitle}</div>
<div className="card-price">{data.ProductPrice} </div>
</div>
</div>



<div className="card">
<Link to={`/productdetails/Aladdin`}>
<img  style={{width:'50%'}} 
src={lol.imageUrl} alt='...'/>
</Link>
<div className='card-content'>
<h3 className="card-catogory">{lol.category}</h3>
<div className="card-title">{lol.ProductTitle}</div>
<div className="card-price">{lol.ProductPrice} </div>
</div>

</div>



</div>
</>
  )
}

export default Products

This the productdetails page and where I want the data shown after the customer clicks on the product.

import React, { useEffect, useState } from 'react'
import '../css/ProductDetails.css'
import { FaFacebook, FaTwitter } from 'react-icons/fa'
import {RiStarSFill} from 'react-icons/ri'
import { useParams } from 'react-router-dom'
import {data} from '../Services/Products'
const ProductDetails = () => {
 const { id } = useParams()





 
  return (
    <>




<div className="details-container">
<div className="flex-wrap-box">



<img alt="..." className="Product-img" src="https://dummyimage.com/400x400"/>
<div className="deatils-desc-box">
<h2 className="deatils-brand-name"> {id}</h2>
<h1 className="Product-Title">{id}</h1>
<div className="reviews-number-box">
<span className="flex-reviews">
 
<RiStarSFill/>
<RiStarSFill/>
<RiStarSFill/>
<RiStarSFill/>
<RiStarSFill/>
<span >5 Reviews</span>
</span>

<span className="flex-social-img">
<a>
<FaFacebook/>
</a>

<a>
<FaTwitter/>
</a>


</span>
</div>

<p className="deatils-desc">{id}</p>



<div className="price-layout">
<span className="price-title">$58.00</span>
<button type='button' className="price-details-btn">Add to Cart</button>

</div>
</div>

</div>
</div>
</>
  )
}

export default ProductDetails

This is the Products.js file
const data = {
id: 1,
imageUrl: require('../assets/img/aptv.png'),
category: `category`,
ProductTitle:`Apple TV 4K (64GB)`,
ProductPrice: `$130`,
ProductDesc: `Apple TV 4K with Siri Remote is designed with the following 
features to reduce its environmental impact:`
}
const lol = {
id: 2,
imageUrl: require('../assets/img/ala.jpeg'),
category: `category`,
ProductTitle:`Aladdin (4K UHD)`,
ProductPrice: `$20`,
ProductDesc: `Climb aboard the magic carpet 
in Disney's animated masterpiece Aladdin, now part of the Walt Disney Signature Collection. Experience the timeless tale featuring Academy Award®-winning music (1992: Best Original Song, Best Original Score), nonstop action and unforgettable characters. Let Aladdin, Jasmine and the Genie show you a whole new world!
`
}







export {data,lol}