React weather dashboard race condition bug

Hard

Users of a weather dashboard application are reporting that sometimes the wrong city's weather is displayed. The following code is responsible for fetching and displaying weather data. What's the critical bug in this implementation?

ReactAsyncRace conditionsReact class componentsApiState management

1class WeatherDashboard extends React.Component {
state = {
  weatherData: null,
  selectedCity: null,
  error: null
};
7
async fetchWeatherData(city) {
  try {
    const response = await fetch(
      `https://api.weather.com/v1/${city}?apikey=12345`
    );
    const data = await response.json();
    this.setState({
      weatherData: data,
      error: null
    });
  } catch (err) {
    this.setState({ error: err.message });
  }
}
22
handleCitySelect = (city) => {
  this.setState({ selectedCity: city });
  this.fetchWeatherData(city);
};
27
render() {
  const { weatherData, error } = this.state;
  return (
    <div>
      <CitySelector onSelect={this.handleCitySelect} />
      {error ? (
        <ErrorMessage message={error} />
      ) : (
        <WeatherDisplay data={weatherData} />
      )}
    </div>
  );
}
41}

Users of a weather dashboard application are reporting that sometimes the wrong city's weather is displayed. The following code is responsible for fetching and displaying weather data. What's the critical bug in this implementation?

Hint