I've been trying to get the product information and display it in a new page, but i keep getting the same values for all products, and can't understand the reason why.

here is my items

import React from 'react'
import { Link, useParams } from 'react-router-dom'
import { items } from '../database/images/Database'
import styles from '../singleitem/singleproduct.module.css'


const Item = () => {

   const { id } = useParams();
   const product = items.find((product) => product.id === id);
   const { productName, productPrice, description, content, productImage, productImageList } = product;
   
 return (
   <div className={styles.main}>
   <h2>Product {id}</h2>
   <div className={styles.product}>
     <div className={styles.text}>
       <h1>{productName}</h1>
       <h3>Price: ${productPrice}</h3>
       <h3>{description}</h3>
       <h4>{content}</h4>
       <button className={styles.btn1}>Add to Cart</button>
     </div>
     <div >
       <img className={styles.mainimg} src={productImage} alt='' />
     </div>
     <div >
       <img src={productImageList} alt='' />
     </div>
   </div>
   <div className={styles.return}>
     <Link to={'/products/'}>back to Products</Link>
   </div>
 </div>
 )

here is the route I'm using in Index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
  <Routes>
    <Route path='/' element={<App />} />
    <Route path='/aboutus' element={<AboutUs />} />
    <Route path='/products' element={<InfoProducts />} />
    <Route path='/products/:_id' element={<SingleProduct />} />
    <Route path='/privacy' element={<PrivacyP />} />
    <Route path='/wholesale' element={<WholeSale />} />
    <Route path='/brand' element={<Brand />} />
  </Routes>
  </BrowserRouter>
);

and Here is what i'm using to get access to the page with the id to display it on the /products/

  console.log(items);
  const listItems = items.map((item) =>
    <div className={styles.card} key={item.id}>
      <div className={styles.cardimg}>
        <img className={styles.imgs} src={item.productImage} alt='' />
      </div>
      <div className={styles.cardHeader}>
        <h3>{item.productName}</h3>
        <p>{item.description}</p>
        <p className={styles.price}>${item.productPrice}</p>
        <Link to={`/products/${item.id}`}><button className={styles.btn}>See More</button></Link>
      </div>
    </div>

here is the .js data im using

export const items = [
    {
        id:1, 
        category:'Set',
        productName:'CleanHits(Set)',
        productPrice:18,
        description:'GreenTea/Lemon',
        content:'A new odor filtration system,designedto give you the freeddom to drop big hits at home or anywhere indoors.',
        isOff:true,
        offPercentage:10,
        productImage:require('../images/Set/GreenHits/GreenHits.png'),
        productImageList:[
            require('../images/Set/GreenHits/GreenHits.png'),
            require('../images/Set/GreenHits/GreenHits2.png'),
            require('../images/Set/GreenHits/GreenHits3.png'),
            require('../images/Set/GreenHits/GreenHits4.png'),
        ]
    },
    {
        id:2, 
        category:'Set',
        productName:'CleanHits(Set)',
        productPrice:18,
        description:'Mirra/Ylang Ylang',
        content:'A new odor filtration system,designedto give you the freeddom to drop big hits at home or anywhere indoors.',
        isOff:true,
        offPercentage:10,
        productImage:require('../images/Set/YellowHits/YellowHits.png'),
        productImageList:[
            require('../images/Set/YellowHits/YellowHits1.png'),
            require('../images/Set/YellowHits/YellowHits2.png'),
            require('../images/Set/YellowHits/YellowHits3.png'),
            require('../images/Set/YellowHits/YellowHits4.png'),
        ]
    },
    {
        _id:3, 
        category:'Set',
        productName:'CleanHits(Set)',
        productPrice:18,
        description:'straberry/mint',
        content:'A new odor filtration system,designedto give you the freeddom to drop big hits at home or anywhere indoors.',
        isOff:true,
        offPercentage:10,
        productImage:require('../images/Set/RedHits/RedHits.png'),
        productImageList:[
            require('../images/Set/RedHits/RedHits1.png'),
            require('../images/Set/RedHits/RedHits2.png'),
            require('../images/Set/RedHits/RedHits3.png'),
            require('../images/Set/RedHits/RedHits4.png'),
        ]
    },
    {
        id:4, 
        category:'Set',
        productName:'CleanHits(Set)',
        productPrice:18,
        description:'Vanilla/Lavander',
        content:'A new odor filtration system,designedto give you the freeddom to drop big hits at home or anywhere indoors.',
        isOff:true,
        offPercentage:10,
        productImage:require('../images/Set/PinkHits/PinkHits.png'),
        productImageList:[
            require('../images/Set/PinkHits/PinkHits1.png'),
            require('../images/Set/PinkHits/PinkHits2.png'),
            require('../images/Set/PinkHits/PinkHits3.png'),
            require('../images/Set/PinkHits/PinkHits4.png'),
        ]
    },
]

CodePudding user response：

For your particular case

<Route path='/products/:_id' element={<SingleProduct />} />

you should get the params variable properly (id to _id)

const { _id } = useParams();

CodePudding user response：

that's because the name of the path parameter is _id as in here:

<Route path='/products/:_id' element={<SingleProduct />} />

so the right way to access this parameter in any component rendered under this route should be:

const { _id } = useParams();

You could also rename the id parameter in the Route definition like this:

<Route path='/products/:id' element={<SingleProduct />} />

Edit

Forgot to say that in this line:

const product = items.find((product) => product.id === id);

the variable product might be null, so this statement:

const { productName, productPrice, description, content, productImage, productImageList } = product;

May fail, you should first check for nullability of product and render well NotFound component for example.