Rest Countries Api using React.js

Community feedback

• 

  Sophie•430

  @ippotheboxerPosted about 1 month ago

  Hi, what you've done so far is really great! The search works and the filter by region. However you didn't incorporate one of the keys parts of the app, which was clicking on a country article to get more specific information displayed. Here is some advice on how to implement it: In your App.jsx, you aren't using BrowserRouter to get dynamic routing, so currently it would be impossible to implement this other page. In the App.jsx, you could make it look like this:

  return (
  <div className="min-h-screen">
   <BrowserRouter>
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/home' element={<Home /> } />
      <Route path='/:countryName' element={<SpecificCountry />} />
     </Routes>
    </BrowserRouter>
  </div>
  

  And then create a Home.jsx in a pages folder. Then simply move the code you currently have in App.jsx to Home.jsx. Now when you are mapping through in AllCountries.jsx, wrap it with <Link to={`${country.name.common}`}> </Link>. Now you can create a new page called SpecificCountry.jsx and include all the more specific information. Now on that page use const { countryName } = useParams(); to get the countryName from the link. You can make a get request to the api with that name now, and get all the specific information. Then you can include a back button on it with

  const navigate = useNavigate();
  ...
  <button onClick={() => navigate("/")}>Back</button>
  

  To go back to the homepage. Hope this helps!

  0