Skip to content
OverviewSolutions
28
Comments
2
Nika Botchorishvili
@NikaBotchorishvili

All comments

  • Nika Botchorishvili•490
    @NikaBotchorishvili

    Good job,

    I would suggest to not use percentage value for width here and instead of that use fixed width, which you'll modify with media queries when you notice it isn't looking right.

    Take care!👋

  • Nika Botchorishvili•490
    @NikaBotchorishvili

    Hello @mahdipratama 👋

    Looking over your code I noticed that you use your search term in the function from which you return all your countries.

       ...
   const [searchTerm, setSearchTerm] = useState('a');

   const fetchAllCountry = useCallback(async () => {
        setLoading(true);
   try {
        const response = await fetch(`${searchCountryURL}${searchTerm}`);
   ...

    You should split the logic for when the user is searching for a country and when all the countries are loaded.

    Use this API ENDPOINT to request all of the countries.

    Also in the part where you create search term state:

       ...
   const [searchTerm, setSearchTerm] = useState('a');
   ...

    You set the default value to be 'a' which will return many of the countries as a data but not all of them. (You can compare the return data of /all and /name/a)

    So to say it shorter split the searching and the initial API requests.

    In conclusion the project looks really polished.❤️ Good job and keep going ! 🔥