Adopt a pet react Project

Get 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

2 Likes