UseParams() not working and not rendering data on screen

Question

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>
  )
}

Answer 1

useParams() is working fine. As id in FullCard is of type string so you are comparing type and value both in FullCard filter. So please use items.id==id or items.id===Number(id).