TypeError: Cannot read property 'id' of undefined react

Question

I have an product.js file. I want to read data by id like http://localhost:3000/product/2 (/product/:id). But its show me TypeError: Cannot read property 'id' of undefined react. I just want to read my product by product id. I read my all products. But when I want to read single data its show this error. I think its props problem. Please help me out. I give my file. my product.js file.

exports.products = [
  {
    _id: '1',
    name: 'Airpods Wireless Bluetooth Headphones',
    image: '/images/airpods.jpg',
    description:
      'Bluetooth technology lets you connect it with compatible devices wirelessly High-quality AAC audio offers immersive listening experience Built-in microphone allows you to take calls while working',
    brand: 'Apple',
    category: 'Electronics',
    price: 89.99,
    countInStock: 10,
    rating: 4.5,
    numReviews: 12,
  },
  {
    _id: '2',
    name: 'iPhone 11 Pro 256GB Memory',
    image: '/images/phone.jpg',
    description:
      'Introducing the iPhone 11 Pro. A transformative triple-camera system that adds tons of capability without complexity. An unprecedented leap in battery life',
    brand: 'Apple',
    category: 'Electronics',
    price: 599.99,
    countInStock: 7,
    rating: 4.0,
    numReviews: 8,
  },
  {
    _id: '3',
    name: 'Cannon EOS 80D DSLR Camera',
    image: '/images/camera.jpg',
    description:
      'Characterized by versatile imaging specs, the Canon EOS 80D further clarifies itself using a pair of robust focusing systems and an intuitive design',
    brand: 'Cannon',
    category: 'Electronics',
    price: 929.99,
    countInStock: 5,
    rating: 3,
    numReviews: 12,
  },
  {
    _id: '4',
    name: 'Sony Playstation 4 Pro White Version',
    image: '/images/playstation.jpg',
    description:
      'The ultimate home entertainment center starts with PlayStation. Whether you are into gaming, HD movies, television, music',
    brand: 'Sony',
    category: 'Electronics',
    price: 399.99,
    countInStock: 11,
    rating: 5,
    numReviews: 12,
  },
  {
    _id: '5',
    name: 'Logitech G-Series Gaming Mouse',
    image: '/images/mouse.jpg',
    description:
      'Get a better handle on your games with this Logitech LIGHTSYNC gaming mouse. The six programmable buttons allow customization for a smooth playing experience',
    brand: 'Logitech',
    category: 'Electronics',
    price: 49.99,
    countInStock: 7,
    rating: 3.5,
    numReviews: 10,
  },
  {
    _id: '6',
    name: 'Amazon Echo Dot 3rd Generation',
    image: '/images/alexa.jpg',
    description:
      'Meet Echo Dot - Our most popular smart speaker with a fabric design. It is our most compact smart speaker that fits perfectly into small space',
    brand: 'Amazon',
    category: 'Electronics',
    price: 29.99,
    countInStock: 0,
    rating: 4,
    numReviews: 12,
  },
]

// export default products;

My App,js

import logo from './logo.svg';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

import Home from './components/home/Home';
import Nav from './components/home/Nav';
import Footer from './components/home/Footer';
import Single from './components/home/Single';
// import AdminHome from './components/admin/AdminHome';

function App() {
  return (
    <Router>
    <div>
    <Nav />
        <Switch>
          <Route  exact  path="/"><Home /></Route>
          <Route    path="/product/:id"><Single /></Route>

        </Switch>
    <Footer/>
    </div>
  </Router>
  );
}

export default App;

My Single.js

import React, { Component,useState ,useEffect }from 'react'
import axios from "axios";
import {products} from "../../products"
const Single = ( match ) => {
    const product = products.find((p) => p._id === match.params.id)

    return (
        <div>

            {product.name}

        </div>
    )
}

export default Single

how can i use my props? So how can i read my single data by ID. Thank you.

Answer 1

In Single.js, you should either take in props as an argument, or destructure it if you want to use match directly.

If you're not getting props, you can use withRouter() HOC for Single.

Example (I've destructured it to get the id):

...
import { withRouter } from "react-router-dom";
...

 const Single = ({
  match: {
    params: { id }
  }
}) => {
  const product = products.find((p) => p._id === id);
  return <div>{product.name}</div>;
};

export default withRouter(Single);

Here's a working CodeSandBox replica for this

Answer 2

you can use useParams from react-router-dom

import React, { Component,useState ,useEffect }from 'react'
import axios from "axios";
import {products} from "../../products"
import {
  
  useParams
} from "react-router-dom";
const Single = ( match ) => {
      let { id } = useParams();
    const product = products.find((p) => p._id === id)

    return (
        <div>

            {product.name}

        </div>
    )
}

export default Single

See here