I am working on an eCommerce website and I am stuck .
I am mapping through a array and it renders Image and a link . I want to click the link(checkitem) on image and it should open the Image and detail in different page but its not working.
I am using reactrouter for it and passing the id of the image to useparams() in my Fullcard component . In my Full card component i am filtering and mapping the array according to the id of the image , but it seems to not work .Can you guys help me.

Here is the CodeSandboxLink of the project : https://codesandbox.io/s/strange-driscoll-gpl629?file=/src/App.js

Here is my Appjs :

import Hero from './Hero';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import FullCard from "./FullCard";
function App() {

  const data = [
    {
      burh: "1fdsd",
      id: 1,
      img: "https://d3o2e4jr3mxnm3.cloudfront.net/Mens-Jake-Guitar-Vintage-Crusher-Tee_68382_1_lg.png",
    },
    {
      burh: "1fdsd",
      id: 2,
      img: "https://cdn.shopify.com/s/files/1/0101/4832/products/Angela_Natural_Tee.png?v=1606780388",
    },
    {
      burh: "1fdsd",
      id: 3,
      img: "https://www.prada.com/content/dam/pradanux_products/U/UCS/UCS319/1YOTF010O/UCS319_1YOT_F010O_S_182_SLF.png",
    },
    {
      burh: "1fdsd",
      id: 4,
      img: "https://www.burdastyle.com/pub/media/catalog/product/cache/7bd3727382ce0a860b68816435d76e26/107/BUS-PAT-BURTE-1320516/1170x1470_BS_2016_05_132_front.png",
    },
  ];




  return (
    <Router>
      <Routes>
        <Route path="/" element={<Hero data={data}/>} />
        <Route path="/products/:id" element={ <FullCard data={data} />} />
      </Routes>
    </Router>
  );
}

export default App;

Here is my Card:

// import { popularProducts } from "./data";
import { Link } from "react-router-dom";
import "./Card.css";

const Card = ({ data }) => {
  return (
    <div className="Maincontainer">
      <div className="CardContainer">
        {data.map((items, index) => {
          return (
            <div className="cards" key={index}>
              <img src={items.img} alt="/" />

              <Link to={`/products/${items.id}`}>CheckItem</Link>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Card;

Here is my Full card comp:

import { useParams  } from 'react-router-dom'

const FullCard = ({data}) => {

    const {id} = useParams();


  return (
    <div className='container'>
        {data.filter(  (items )=> items.id === id ).map((items,index) =>{
            return (
                <div key={items} className="container2">
                    <h1>{items.burh}</h1>
                    {/* <img src={items.image} alt="/" /> */}
                </div>
            );
        })}
    </div>
  )
}

>Solution :

Issue

The id properties in data are number types, but the id route match param will be a string. The data filtering in FullCard is failing because you are using strict equality, which requires both operands to be of the same type. In this case, either both numbers or both strings.

{data
  .filter((items) => items.id === id) // <-- type mismatch comparision
  .map((items, index) => {
    return (
      <div key={items.id} className="container2">
        <h1>{items.burh}</h1>
        {/* <img src={items.image} alt="/" /> */}
      </div>
    );
  })}

Solution

Either use loose equality, i.e. == so type coercion/conversion is attempted in determining equality

.filter((items) => items.id == id)

or convert the items.id to a string and use string equality

.filter((items) => String(items.id) === id)