I'm trying to create a reusable component by using useparams however i cannot pass the id since it always say undefined
im not really sure whats wrong since idk why the values aren't being passed, this is my first time with routing so any help is appreciated thanks a lot
card.jsx
import React from 'react';
import { useNavigate, Link} from 'react-router-dom';
const Card = (props) => {
console.log(props.title)
return (
<div>
<h2>{props.id}</h2>
<h2>{props.title}</h2>
<p>{props.price}</p>
<Link to={`/cards-details/${props.id}`}>
<p>Buy Now</p>
</Link>
</div>
);
}
export default Card;
cardDetails.jsx
import React from 'react';
import { useParams } from 'react-router-dom';
import cardData from './cardData';
function CardDetails(props) {
const {id} = useParams()
console.log(props.key)
const selectedCard = cardData.find(card => card.id === id);
return (
<div>
<h1>{id}</h1>
</div>
);
}
export default CardDetails;
cardwrapper.jsx
import React, { useState } from 'react';
import Card from './Card';
import CardDetails from './CardDetails';
function CardWrapper({ cards }) {
return (
<div className='grid grid-cols-4 place-items-center'>
{cards.map(card=> (
<Card key={card.id} title={card.title} price={card.price} />
))}
</div>
);
}
export default CardWrapper;
app.jsx
function App() {
const [open, setopen] = useState(true)
return (
<>
<div className="">
<Router>
{ open &&
<>
<Banner />
<Navbar />
</>
}
<Routes>
<Route path='/' element={<Home funcNav={setopen}/>}/>
<Route path='/auth' element={<Auth funcNav={setopen}/>}/>
<Route path='/cart' element={<Cart />}/>
<Route path='/sale' element={<All />}/>
<Route path='/about' element={<About />}/>
<Route path='/faq' element={<Faq />}/>
<Route path ='/register' element={<Register />}/>
<Route path = "/cards-details/:id" element={<CardDetails/>}/>
</Routes>
</Router>
</div>
</>
)
}
export default App
Change this:
<Card
key={card.id}
title={card.title}
price={card.price} />
to this (it's missing the id):
<Card
key={card.id}
id={card.id}
title={card.title}
price={card.price} />