Skip to content
Submitted over 3 years ago

Responsive landing page using ReactJS and Styled-Components

react, styled-components
Andre Castro•60
@Andreeesc
A solution to the REST Countries API with color theme switcher challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I can't get the region filter to work properly, can someone help me find the solution?

Code

Please log in to post a comment

Log in

Community feedback

  • Ben Andrew Merritt•345
    @b-a-merritt

    Hey!

    The filter feature is a little tricky. The reason why yours is having issues is because it's not rendering the results after selection. You need a useEffect() hook that induces a re-render with your query state in the dependency array.

    Also, I think it would be better if you saved the country data into a variable, then filtered the results into another variable that you then passed to your Components, instead of fetching the data with each new query.

    Anyway, good job and happy coding!

    Marked as helpful
  • Amon•2,560
    @A-amon

    Hello! I might be wrong but in React, you cannot get the latest, updated state right after setting the state. Refer here You have to either use useEffect (and set the trigger to be the 'region' state) or use the 'e.target.value' directly.

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord