So my code was working with no issues until i added useParams
[...]
const promiseDelay = () => {
const E_COMMERCE_API = "https://mocki.io/v1/027ebfda-9bd8-4b53-ae33-ab41586d773a";
return new Promise((resolve, reject) => {
setTimeout(() => resolve(fetch(E_COMMERCE_API)), 1000);
});
};
export default function ItemDetailContainer() {
const { itemId } = useParams();
const [dataToShow, setDataToShow] = useState([]);
useEffect(() => {
promiseDelay()
.then((response) => response.json())
.then((data) => {
const aux = data.find((element) => {
console.log(itemId); //<--- 2
// return element.id === itemId; <--- if i uncomment, i get no data
return element.id === 2; // with this line, everything works just fine
});
setDataToShow(aux);
});
}, []);
[...]
}
Apparently even if itemId its 2 its not the same and wrecks everything.
It's probably because the param is a string when it's parsed from the URL. The useParams hook doesn't know to parse it to a number.
So element.id === Number(itemId) should fix it.