so i have an error massage - Productdesscreen.jsx:13 Uncaught TypeError: Cannot read properties of u-CodePudding

    //this is the product detail screen
import React from 'react'
import {useParams } from 'react-router-dom';
 
import products from '../products'//this is a jason file having row data


const Productdesscreen = () => {

    const { id } = useParams();

    const product = products.find((p) => p._id === Number(id));

    return (
        <div>
            {product.name}
        </div>
    );
}

  


export default Productdesscreen;

    //this the products json file

    const products = [{
  "id":1,
  "rating": 5,
  "reviews": [],
  "price": 1200,
  "countInStock": 4,
  "name": "ZEBRONICS Zeb-Yoga 101 Bluetooth Headset  (Red, In the Ear)",
  "category": "electronics",
  "image": "https://rukminim1.flixcart.com/image/416/416/khp664w0-0/headphone/p/d/k/zeb-yoga-101-zebronics-original-imafxnkdwzt4gzhg.jpeg?q=70",
  "description": " Model Name Zeb-Yoga 101 Color Red Headphone Type In the Ear Inline Remote Yes Sales Package 1 Headphone, 2 Pair of Earbuds, 2 Pair of Earhooks, Charging Cable, User Manual Connectivity Bluetooth Headphone Design Behind the Neck Product Details Sweat Proof No Foldable/Collapsible Yes Deep Bass Yes Water Resistant No Monaural No Controls Volume Control, Magnetic Switch Control Other Features Magnetic Earpiece, Voice Assistance Support With Microphone Yes Sound Features Impedance 32 Ohms Connectivity Features Bluetooth Version 4.2 Battery Life 7 hrs Charging Time 2 Play Time 7 hrs Standby Time 100 hrs Dimensions Weight 19 g Warranty Domestic Warranty 1 Year Warranty Summary 1 Year Carry into Service Centre Warranty Warranty Service Type Carry-in to Service Centre or Call our Customer Care - 9360942527 Covered in Warranty Manufacturing Defects Not Covered in Warranty Any Physical Damage and Accessories",

}, {
  "id": 2,
  "rating": 5,
  "reviews": [],
  "price": 15000,
  "countInStock": 0,
  "name": "Samsung Galaxy M51 (Electric Blue, 6GB RAM, 128GB Storage)",
  "category": "mobiles",
  "image": "https://images.samsung.com/is/image/samsung/in-galaxy-m51-m515fz-8gb-sm-m515fzbeins--304622793?$684_547_PNG$",
  "description": "Quad camera setup - 64MP (F1.8) main camera   12MP (F2.2) ultra wide camera   5MP (F2.4) depth camera   5MP (F2.4) macro camera and 32MP (F2.2) front camera 16.95 cm (6.7-inch) sAMOLED Plus - Infinity-O display, FHD  capacitive touchscreen with 1080 x 2400 pixels resolution, Contrast Ratio: 78960:1 Memory, Storage & SIM: 6GB RAM, 128GB internal memory expandable up to 512GB | Dedicated Memory slot Android v10.0 operating system with 2.2GHz 1.8GHz Qualcomm | SD730G octa core processor",

}, {
  "id": 3,
  "rating": 4.25,
  "reviews": [],
  "price": 48000,
  "countInStock": 5,
  "name": "New Inspiron 15 5509 Laptop",
  "category": "electronics",
  "image": "https://i.dell.com/is/image/DellContent//content/dam/global-asset-library/Products/Notebooks/Inspiron/15_5508_non-touch/in5508nt_cnb_00055lf110_gr.psd?fmt=pjpg&pscan=auto&scl=1&hei=402&wid=668&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0&size=668,402",
  "description": "11th Generation Intel® Core™ i3-1115G4 Processor (6MB Cache, up to 4.1 GHz)  laptop Windows 10 Home Single Language, English  videocard Intel® UHD Graphics with shared graphics memory  memory 8GB, 1x8GB, DDR4, 3200MHz  harddrive 512GB M.2 PCIe NVMe Solid State Drive  color Pebble (Top cover is Pebble color, Base and Palmrest are Black color)",

}, {
  "id": 4,
  "rating": 4.5,
  "reviews": [],
  "price": 4800,
  "countInStock": 5,
  "name": "Pure Cotton Men’s Checked Shirt By NoLogo",
  "category": "fashion",
  "image": "https://static.cilory.com/450690-thickbox_default/nologo-navy-casual-shirt.jpg",
  "description": "Product Code 87781 Sleeves Full Sleeves Pattern Checks Neck Collar Fit Slim Fabric 100% Cotton Country of Origin India Color Navy Category Shirts",

}, {
  "id": 5,
  "rating": 5,
  "reviews": [],
  "price": 800,
  "countInStock": 7,
  "name": "Logitech M170 Wireless Mouse, Black",
  "category": "electronics",
  "image": "https://www.reliancedigital.in/medias/Logitech-WIRELESS-MOUSE-M170-491276865-i-1-1200Wx1200H?context=bWFzdGVyfGltYWdlc3wxNDI0NTd8aW1hZ2UvanBlZ3xpbWFnZXMvaGE5L2hiNi85MjAwNjI5NTc5ODA2LmpwZ3xiNjA3ZTI3MDJjYzBmZWEwY2IzNzY0MTAyZTU1MjM3ZTE5ZTc3MzhlNTZhN2ZkOTFjMmNhNmY0MDVmY2FhNTU2",
  "description": "2.4 GHz Wireless connection Shape of the mouse supports hand for comfortable use Wireless range of up to 33 feet",

}, {
  "id": 6,
  "rating": 5,
  "reviews": [],
  "price": 56000,
  "countInStock": 6,
  "name": "Apple iPhone XR 128 GB, Blue (Includes Earpods and Adapter)",
  "category": "mobiles",
  "image": "https://www.reliancedigital.in/medias/Apple-iPhone-XR-128GB-Blue-491488452-i-1-1200Wx1200H?context=bWFzdGVyfGltYWdlc3w4NzY3NnxpbWFnZS9qcGVnfGltYWdlcy9oODMvaGIwLzkwNTE3MzU1NTYxMjYuanBnfDU4ZTdiOTljNWNhMjA0MDgyZjEyYzkxYzZkZmIzMGE2MTQ1MzVlNDAzOTc5ZjgwMmYyODNhYjhjNzM5ODg5ZDA",
  "description": "ColourBlue Sub-brandiPhone ModelXR BrandApple Phone Hardware & Storage Internal Storage128 GB ProcessorA12 Bionic Chip Phone Build & Convenience Height15.09 cms Width7.57 cms Thickness0.83 cms Weight194 grams Water ResistantYes SensorsBarometer, Accelerometer, Proximity, Ambient Light",

}]
export default products;

           //this is app component
    import logo from './logo.svg';
    import './App.css';
    import{BrowserRouter, Route, Routes } from 'react-router-dom';
    import bootstrap from "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    import Homescreen from './SCREENS/Homescreen';
    import Navbar from './components/Navbar';
    import Productdesscreen from './SCREENS/Productdesscreen';
    function App() {
      return (
        <div className="App">
          <Navbar/>
          <BrowserRouter>
           <Routes>
              <Route path="/" element={<Homescreen/>}/>
              <Route path="/product/:id" element={<Productdesscreen/>}/>
            </Routes> 
          </BrowserRouter>
                    
        </div>
      );
    }
    
    export default App

;

CodePudding user response：

You are looking for a product with the property _id (in line 10), but your products don't have that property, they have one called id.

CodePudding user response：

The product is defined with the following properties: id, rating, etc.

{
  "id": 6,
  "rating": 5,
  "reviews": [],
  "price": 56000,
  "countInStock": 6,
  "name": "Apple ...",
  "category": "mobiles",
  "image": "https://",
  "description": "",
}

But you try to filter a product by _id which is not defined. So your filtered product is always undefined and got the error message as you've shown.

const product = products.find((p) => p._id === Number(id));

You should filter a product by id.

const product = products.find((p) => p.id === Number(id));

You need to check product in your rendering body so that you can prevent the error for any parameter in the URL.

{product? product.name : 'Sorry, the product does not exist!'}