REST countries API with theme switcher using React

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!

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/>) }