ProductDetail.js file

import React from 'react'
import { useParams } from 'react-router-dom'
import DATA from '../Data';

const ProductDetail = () => {
{/*Now we need a product id which is pass from the product page*/}
const proid=useParams();
const proDetail=DATA.filter(x=>x.id===proid.id)
const product=proDetail[0]
console.log(product)



return (
<>
  <div className='container my-5 py-3'>
      <div className='row'>
      <div className='col-md-6'>
              <img src={product.img} alt={product.title} />
          </div>
          <div className="col-md-6">
              <h1>{product.title}</h1>
              <hr />
              <h2>{product.price}</h2>
              <p>{product.desc}</p>
              <button className='btn btn-outline-primary'>Add to cart</button>
          </div>
      </div>
  </div>
</>
 )
}

export default ProductDetail

App.js file

import './App.css';
import Header from './components/Header';
import {BrowserRouter, Routes,Route} from 'react-router-dom'
import Home from './components/Home';
import Product from './components/Product';
import About from './components/About';
import Contact from './components/Contact';
import Footer from './components/Footer';
import ProductDetail from './components/ProductDetail';


function App() {
return (
<div>
  <BrowserRouter>
    <Header/>
    <Routes>


      <Route path='/' element={<Home/>}/>
      <Route path='/product' element={<Product/>}/>
      <Route path='/product/:id' element={<ProductDetail/>}/>
      <Route path='/about' element={<About/>}/>
      <Route path='/contact' element={<Contact/>}/>
      
    </Routes>
    <Footer/>
    </BrowserRouter>
</div>


 );
}

export default App;

Data.js file

    const DATA=[
    {
        id:0,
        title:'Apple iPhone 11',
        price:49900,
        desc:'6.1-inch (15.4 cm diagonal) Liquid Retina HD LCD display Water and dust resistant (2 meters for up to 30 minutes, IP68) Dual-camera system with 12MP Ultra Wide and Wide cameras; Night mode, Portrait mode, and 4K video up to 60fps 12MP TrueDepth front camera with Portrait mode, 4K video, and Slo-Mo Face ID for secure authentication A13 Bionic chip with third-generation Neural Engine Fast-charge capable',
        img:'/iphone1.jpg'
    },`
{
        id:1,
        title:'Apple iPhone 12 (128GB) - Blue',
        price:58999,
        desc:'6.1-inch (15.5 cm diagonal) Super Retina XDR display Ceramic Shield, tougher than any smartphone glass A14 Bionic chip, the fastest chip ever in a smartphoneAdvanced dual-camera system with 12MP Ultra Wide and Wide cameras; Night mode, Deep Fusion, Smart HDR 3, 4K Dolby Vision HDR recording 12MP TrueDepth front camera with Night mode, 4K Dolby Vision HDR recording.Industry-leading IP68 water resistance.Supports MagSafe accessories for easy attach and faster wireless charging.iOS with redesigned widgets on the Home screen, all-new App Library, App Clips and more',
        img:'/blueapple.jpg'
    },
    {
        id:2,
        title:'Apple iPhone 11 (64GB) - (Product) RED',
        price:47999,
        desc:'6.1-inch (15.4 cm diagonal) Liquid Retina HD LCD display Water and dust resistant (2 meters for up to 30 minutes, IP68).Dual-camera system with 12MP Ultra Wide and Wide cameras; Night mode, Portrait mode, and 4K video up to 60fps. 12MP TrueDepth front camera with Portrait mode, 4K video, and Slo-Mo Face ID for secure authentication.A13 Bionic chip with third-generation Neural EngineFast-charge capable',
        img:'/red.jpg'
    }
]
    export default DATA

CodePudding user response：

You probably need to use object destructuring:

const {proid} = useParams();

CodePudding user response：

You can also use optional chaining to check for an existing property.

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Optional_chaining

{<img src={product?.img} alt={product.title} />}