Having trouble filtering the data from json

Question

Hello again Stackoverflow members.I have GLS Component I have more similiar components to GLS concept is the same but styling is not, anyway the thing I want to achieve is this, when I press on the Link in GLS/A Component I want to display/Render the image class and price of that Component on the payment page for some reason it is giving me this error 'TypeError: Cannot read property 'image' of undefined'. I would be very grateful if someone could help me.

Gls Component
import React from "react";
import data from "../data.json";
import { Link } from "react-router-dom";
function GLS({product}) {
  return (
    <div>
          <div key={product.id} className="m-4 bg-blue-100 rounded-xl p-8 absolute ">
            <div>
              <Link
                to={`/payment/${product.id}`}
                className="py-1 px-2 text-black-600 h-10  ml-24 mt-32 bg-white w- 
            36 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600"
              >
                Buy Now
              </Link>
              <img
                alt=""
                className="w-screen object-contain"
                src={product.image}
              ></img>
              <h1 className=" ml-24 md:text-5xl sm:text-5xl  top-8">
                {product.class}
              </h1>
              <h1 className="text-base font-mono ml-24 top-24">
                {product.price}
              </h1>
            </div>
          </div>
    </div>
  );
}

export default GLS;
App Component
import React,{useState, useEffect} from 'react'
import './assets/main.css'
import A from './Models/GLS Model/A'
import GLS from './Models/GLS Model/GLS'
import data from "./Models/data.json";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
return (
    <div className='' >       
     <div >
       <Router>           
        <Switch>
          <Route  path="gls">
          {data.map((product) => (
              <GLS key={product.id} product={product} />
            ))}
            </Route>
          <Route  path="a">
          {data.map((product) => (
              <A key={product.id} product={product} />
            ))}
         </Route> 
            <Route path="/payment/:productId">
            <Payment />
          </Route>
          <Route exact path="/">
            <Home />
          </Route>
        </Switch>  
       </Router>
     </div>
    </div> 
  );
}

export default App;

import React from 'react'
import {
    Link, 
  } from "react-router-dom";
import data from "./Models/data.json";

function Home() {
    return (
        <div className='ml-20'>
          <nav className='bg-red-50 max-w-full'>
            <ul >    
            <li>           
           <Link to='/gls'>GLS-class</Link>
            </li>           
            <li>
             <Link to="/a"> A-Class</Link>
            </li> 
          </ul>
        </nav>
        </div>
    )
}
export default Home


Payment Component

import React from "react";
import { useParams } from "react-router-dom";
import data from "./Models/data.json";

const Payment = () => {
  const { productId } = useParams();
  const filteredData = data.filter((product) => product.id === productId)[0];

  return (
    <div className="ml-20">
      <img alt="" className="w:2/4 object-contain " src={filteredData.image} />
      <h2
        className=" ml-24 mlg:ml-6 mlg:mt-2 mlg:static text-5xl mlg:text-2xl text-blue-400 absolute top- 
        48"
      >
        {filteredData.class}
      </h2>
      <h3
        className="text-lg  mlg:mb-2 mlg:ml-6  mlg:mt-2 mlg:static font-bold text-green-800 
                 font-mono ml-24 top-64  absolute"
      >
        {filteredData.price}
      </h3>
    </div>  
  );
};

export default Payment;

Json file
[
{
"id": 0,
"class": "A-Class",
"image": "./ModImages/Aclass.jpg",
"price": "It goes around $37,300",
},

{
"id": 1,
"class": "GLS-Class",
"image": "./ModImages/GLSclass.jpg",
"price": "It goes around $47,700"

}
]

Answer 1

TypeError: Cannot read property 'image' of undefined This is a great error to have because it more or less tells you exactly what's wrong. In basic terms, undefined means that a variable has been declared but has not yet been assigned a value.

function myFunc(product) {
  return product.img;
}
var product; //initialized to undefined, must explicitly set type;
console.log(myFunc(product));

Result -> Uncaught TypeError: product is undefined

function myFunc(product) {
  return product.img;
};
var product; //undefined
product = {}; //explicitly setting to object
product.img = 'image'; // set a name and value
console.log(myFunc(product));