problem rendering items with props.match.params.id - reactjs

Question

I am trying to implement a simple query string matches to show the appropriate item.
here is the component which will render further info on a listed item:
const Product = (props) => {
console.log(props.match.params.id)
console.log(data.products)
const product = data.products.find((x) => x.id === props.match.params.id);
if (!product) {
return <div>product not found!</div>;
}
while both of thoese consule logs give me what i want the product does not seem to be found. here is my product list:
const data={
products:[
{
id:1,
brand:'Nappies',
price:1200
},
{
id:2,
brand:'Knitted Goods',
price:1400
},
{
id:3,
brand:'Baked Treats',
price:1100
},
{
id:4,
brand:'Clothes',
price:1100
}
]
}
and i am matching the querys with this ...
<Link to={`/product/${product.id}`}><button className="card bg-gray-700 hover:bg-red-600 transition text-white w-full h-1/6 absolute bottom-0">See More</button></Link>
the above button is the button a user clicks to see more on that item (price, name, stock, etc)
when clicking that link it takes me to the appropriate page url. (http://localhost:3000/product/2 )but its giving me the "no item found visually on the page"
this is how my app.js is set up... fairly simply:
<Nav />
<Switch>
<Route exact path='/'>
<Homepage />
</Route>
<Route path='/product/:id' component={Product}/>
</Switch>
</Router>
it seems to be like the find method isn't working? such a bizarre problem. am i missing something really obvious? been coding about a year and still find myself stumped on simple react stuff lately :/ so discouraging.
its not rendering any of my info after that in the individial product component
shown down below:
<li>
<div className="row">
<div>{product.name}</div>
<div className="price">{product.price}</div>
</div>
</li>
essentially i want the above code rendered after clicking one of the listed items. its saying "cannot get id of undefined".... seems to be something with me find method but even then i still can't figure out what could be wrong?!?

Answer 1

propps.match.params.id seems to be a string
but, when your looks for a particular product, you use strict match
const product = data.products.find((x) => x.id === props.match.params.id);
your id is number, '2' === 2 is false
So, try
const product = data.products.find((x) => x.id === Number(props.match.params.id));

Answer 2

Do use useParams hook to retrieve id as
const Product = (props) => {
let { id } = useParams();
return (
<div>
<h3>ID: {id}</h3>
</div>
);
}
For further details check here https://reactrouter.com/web/example/url-params