Adopt a pet react Project

Language Help React.js
1

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

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
3

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.

4

Hey, link us your repo!

5

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;

6

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.

7

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;

8

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