react-router-pro | Frontend Framework library

You've done some mistakes over there in your ProductDetail.js file.

You can use useEffect hook to check and compare if there is a matching id or not.

You can use useState hook to store the thisProduct and update the thisProduct value by calling setThisProduct and use it in the JSXElement.

This is always a best practice to use the state for data set and get.

Here is more about React.Hooks

Price is a Object and you can't render your object like that, so use the key instead of object while rendering. like this: {thisProduct?.price?.current?.value}

You can learn more about optional chaining

productId which you're getting from useParams is a string type, and your productId from sneakers is a number type. So you need to change your productId to number while comparing like this: Number(productId)

Learn about Numbers in Js

Here is the complete code of yours:

For simple data like a boolean state, you can use local storage to persist it:

Figured it out.

The thing was that by default, Heroku detected the Node.js app, successfully built it, and served it through my start script. So it didn't make use of static.json. To solve the issue, just add a Static Website Buildpack on Heroku after the Node.js one. I hope this helps somebody!