REST countries API with theme switcher using React

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  Hello Zaid, You have done a good work! 😁

  Some little tips to improve your code:

  • add header tag and wrap the navbar for improve the Accessibility
  • add main tag and wrap the main content of the page for improve the Accessibility
  • use article tag instead of a simple div to the container card for improve the Accessibility
  • add descriptive text in the alt attribute of the images
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
  • instead of using px use relative units of measurement like rem -> read here
  • use one class to body to change the all theme color of app
  • after, add transition on the body to smooth the change theme color
  • use ul element for the details text of country instead of multiple p
  • if I type a query that doesn't give any results, nothing happens, try adding a "no results" message
  • I would also add a query reset button, I find it very convenient
  • in the filters there is no way to return to all countries after choosing a region, add an entry "all region"

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  Marked as helpful

  2

  ---

  

  Zaid Mohammed Zainudeen•260

  @iamzaidmohammedPosted almost 2 years ago

  @denielden Thanks for your help. But as for the the search field if the query does not exist its supposed to show a no found component. But after I added the country details page it doesn't show again.

  And for the region, there's an "All" entry to show all countries.

  So can we collaborate so you could help me finish the project?

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  @zaidmohammed7 You are welcome and keep it up :)

  Sure, I can help you in my spare time :)

  1
• 

  Lukasz•160

  @lukaasz555Posted almost 2 years ago

  Hello, I think the good way to solve your problem is:

  • create [allCountries, setAllCountries];

  • create [filtered, setFiltered];

  In first useEffect, when you are fetching data from API, set respond as allCountries AND instead of fetching data once again and making another API call, you can interate over allCountries. You just need to render data from FILTERED instead of allCountries/countries.

  I've cloned your repo and it works, this is what I've changed in App.js file:

  const [allCountries, setAllCountries] = useState([]);

  const [filtered, setFiltered] = useState([]);

  Inside useEffect I just changed:

  setCountries(countries) to setAllCountries(countries) - ez;

  I've also added 2nd useEffect:

  useEffect(() => { setFiltered(allCountries); }, []);

  I've also changed all searchCountries, as you can see:

  const searchCountries = (e) => { if (allCountries.length > 0) { const inputValue = e.target.value.toLowerCase(); const filteredItems = allCountries.filter((item) => item.name.toLowerCase().includes(inputValue) ); setFiltered(filteredItems); } };

  And it's obvious, that now you have to add onChange listener to your input (and remove useRef): onChange={(e) => searchCountries(e)}

  Last, you have to render <Country {...props} /> component based at FILTERED, e.g.: filtered.map((country) => { return(<Country/>) }

  Marked as helpful

  1

  ---

  

  Zaid Mohammed Zainudeen•260

  @iamzaidmohammedPosted almost 2 years ago

  @lukaasz555 Thanks a lot for checking it out. I really appreciate it. But the problem here is I'm really confused here. I think you should make a pull request instead and make the changes for me. That way I'll see where the changes were made so I can understand it better. 🙏😊

  0

  

  Lukasz•160

  @lukaasz555Posted almost 2 years ago

  Sorry for the chaos in my post, but I had some issues with formatting:D To be clear, one more time:

  https://img.onl/y0z78a - create two, new hooks useState;

  https://img.onl/G2dKe5 - 2 lines that you have to add in useEffect (2nd useEffect is useless);

  https://img.onl/jbxMB - new searchCountries function, based on event;

  https://img.onl/h0ffB9 - JSX changes

  Marked as helpful

  0

  

  Lukasz•160

  @lukaasz555Posted almost 2 years ago

  @zaidmohammed7 You should see pr already:)

  Marked as helpful

  0