Adopt a pet react Project

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;

I had the same problem and after hours found the problem.
The problem is in the order of routes.

import HomePage from './pages/home';
import SearchPage from './pages/search';
import PetDetailsPage from './pages/detail';
import PetDetailsNotFound from './pages/petDetailsNotFound';
import Navigation from './components/navigation';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Navigation />
      <Switch>
        <Route path={'/search'}>
          <SearchPage />
        </Route>
        <Route path={'/:type/:id'}>
          <PetDetailsPage />
        </Route>
        <Route path={'/:type?'}>
          <HomePage />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

This way my code worked.
It send a request as /animals?type=&query=shuri
This is how is was when I had the problem.

import HomePage from './pages/home';
import SearchPage from './pages/search';
import PetDetailsPage from './pages/detail';
import PetDetailsNotFound from './pages/petDetailsNotFound';
import Navigation from './components/navigation';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Navigation />
      <Switch>
        <Route path={'/:type/:id'}>
          <PetDetailsPage />
        </Route>
        <Route path={'/:type?'}>
          <HomePage />
        </Route>
        <Route path={'/search'}>
          <SearchPage />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

It send a request as /animals?type=search&query=.

Mostly this as a problem with the Switch by what I understand

3 Likes

i am having the same problem adn even i changed the order of the routes as well but still it does not render the result only shows Results for null. can please somebody help me here.

Hey, link us your repo!

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-dom’;

const SearchPage = () => {

const location = useLocation();
// const search = ‘REPLACE ME’;

const queryParams = useMemo(() => {
return new URLSearchParams(location);
}, [location]);

const [pets, setPets] = useState();

useEffect(() => {
async function getPetsData() {
const petNameToFind = queryParams.get(‘name’);
const petsData = await getPets(‘’, petNameToFind);

  setPets(petsData);
}

getPetsData();

}, [queryParams]);

return (


<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;

Thank for your reply in advance. And also i cant seem to apply active css on the navlink and i will share that as well if you can look at it.

import { getPetTypes } from ‘…/…/api/petfinder’;
import Logo from ‘…/…/assets/logo.svg’;
import Search from ‘…/search’;

import { NavLink } from ‘react-router-dom’;

const Navigation = () => {
const [petTypes, setPetTypes] = useState();

useEffect(() => {
async function getPetTypesData() {
const { types } = await getPetTypes();
setPetTypes(types);
}

getPetTypesData();

}, );

return (


Petlover



  •       <NavLink
            to="/"
            className="nav-link"
            activeClassName="nav-link-active"
            exact
          >
            All Pets
          </NavLink>
        </li>
        {petTypes
          ? petTypes.map((type) => (
              <li key={type.name}>
               
                <NavLink
                  to={`/${type._links.self.href.split('/').pop()}`}
                  key={type.name}
                  className="nav-link"
                  activeClassName="nav-link-active"
                >
                  {type.name}s
                </NavLink>{' '}
              </li>
            ))
          : 'Loading...'}
      </ul>
    </nav>
    

    );
    };

    export default Navigation;

Hey, it would be easier to debug if you uploaded your whole project to Github and linked it :slight_smile: