So im just stuk at the task 22 of the React Router project Adopt a pet.
https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-22-react-part-ii/modules/wdcp-22-react-router/projects/pet-adoption-website
After this step is supposed to render the search results of the searchbar if it matches one of the options, but it doesn’t, i followed the steps and i even consult a solution code on github, i have exactly the same and still doesn’t work, i don’t know if i had to do something more in other components or something like that.
this is my code:
import React, { useState, useEffect, useMemo } from 'react';
import Hero from '../../components/hero';
import { getPets } from '../../api/petfinder';
import Pet from '../../components/pet';
import { useLocation } from 'react-router';
const SearchPage = () => {
const { search } = useLocation();
const queryParams = useMemo(() => {
return new URLSearchParams(search);
}, [search]);
const [pets, setPets] = useState([]);
useEffect(() => {
async function getPetsData() {
const petNameToFind = queryParams.get('name');
const petsData = await getPets('', petNameToFind);
setPets(petsData);
}
getPetsData();
}, [queryParams]);
return (
<div className="page">
<Hero displayText={`Results for ${queryParams.get('name')}`} />
<h3>Pets available for adoption near you</h3>
<main>
<div className="grid">
{pets.map((pet) => (
<Pet animal={pet} key={pet.id} />
))}
</div>
</main>
</div>
);
};
export default SearchPage;