city.js

getCountries() {
  fetch('/api/endpoint/countries').then((data) => {
    this.setState({ countries: data });
  })
}

getCities(country) {
  fetch(`/api/endpoint/countries/${country}/cities`).then((data) => {
    this.setState({ cities: data });
  });
}

onCountryChange() {
  this.getCities(this.state.country);
}

componentDidMount() {
  this.getCountries();
}

render() {
  <form>
    <select id="country">
      {this.state.countries.map((c) => (
        <option value={c}>{c}</option>
      ))}
    </select>

    <select id="cite">
      {this.state.cities.map((c) => (
        <option value={c}>{c}</option>
      ))}
    </select>
  </form>
}