React DropDown Menu Task

Question

I am at very beginner level and I 'm stuck on this task.

Tasks

1. When the page loads, populate a dropdown menu with the results from a GET call to https://xc-countries-api.fly.dev/api/countries/
2. When a country is selected from the country dropdown, populate a second dropdown with the results from a GET call to https://xc-countries-api.fly.dev/api/countries/<country_code>/states/

I can not get data from second API for states.

Thank you for your time...

import { useState, useEffect } from "react";

const CountriesStates = () => {
    const [countries, setCountries] = useState([]);
    const [states, setStates] = useState([]);
    
    useEffect(() => {
        fetch('https://xc-countries-api.fly.dev/api/countries/')
            .then((response) => {
                return response.json();
            })
            .then((data) => {
                //console.log(data);
                setCountries(data); 
            })
    }, []);

    useEffect(() => {
        
        if(countries === 'default' || countries === '') {
            setStates([]);
        } else {
            fetch(`https://xc-countries-api.fly.dev/api/countries/${countries}/states/`)
                .then((response) => {
                    return response.json();
                })
                .then((data) => {
                    setStates(data);
                })
            }   
    }, [countries]);

    return (
        <>
            <div>
                <select name='countries' id='countries' style={{backgroundColor:'lightblue', borderRadius:'5px', fontSize:'1.3rem', marginRight:'3rem'}}>
                {
                    countries.map((country) => (                    
                            <option key={country.id}>{country.name}</option>                   
                    ))
                }
                </select>         
            </div>

            <div>
                <select name='states' id='states' style={{backgroundColor:'lightblue', borderRadius:'5px', fontSize:'1.3rem', marginRight:'3rem'}}>
                {
                    states.map((state) => (                    
                            <option key={state.id}>{state.name}</option>                   
                    ))
                }
                </select>         
            </div>
        </>
    );
};

export default CountriesStates;

Answer 1

For the selected country, need to add a new state to store and update it. I added the selectedCountry state and then set it whenever the selected option is changed from the dropdown.
Then, need to fetch states whenever the selected country is selected. For this, need to use selectedCountry instead of countries in the useEffect dependency that fetches the states.

CountriesStates.js: (Added some comment lines)

import { useState, useEffect } from "react";

const CountriesStates = () => {
    const [countries, setCountries] = useState([]);
    const [states, setStates] = useState([]);
    // Store the selected country in a new state
    const [selectedCountry, setSelectedCountry] = useState();
    
    useEffect(() => {
        fetch('https://xc-countries-api.fly.dev/api/countries/')
            .then((response) => response.json())
            .then((data) => {
                setCountries(data); 
                // set the first country as selected automatically 
                setSelectedCountry(data[0]);
            })
    }, []);

    useEffect(() => {
        // If there's no selected country, then prevent sending an API request and clear the states
        if (!selectedCountry) {
           setStates([]);
           return;
        }

        fetch(`https://xc-countries-api.fly.dev/api/countries/${selectedCountry.code}/states/`)
          .then((response) => response.json())
          .then(setStates);
}   
    }, [selectedCountry]); // This useEffect should be rendered whenever the selected country is changed

    return (
        <>
            <div>
                <select 
                    name='countries' 
                    id='countries' 
                    style={{backgroundColor:'lightblue', borderRadius:'5px', fontSize:'1.3rem', marginRight:'3rem'}}
                    onChange={event => setSelectedCountry(countries.find(({ id }) => id.toString() === event.target.value.toString()))}>
                {
                    countries.map((country) => (
                         <option key={country.id} value={country.id}>{country.name}</option>                   
                    ))
                }
                </select>         
            </div>
           {!!states.length &&
              <div>
                  <select name='states' id='states' style={{backgroundColor:'lightblue', borderRadius:'5px', fontSize:'1.3rem', marginRight:'3rem'}}>
                  {
                      states.map((state) => (                    
                              <option key={state.id}>{state.name}</option>                   
                      ))
                  }
                  </select>         
              </div>
           }
        </>
    );
};

export default CountriesStates;

I also created a DEMO LINK to review and test it easily.

Hope, it's clear and helpful.