State not fetching API data on submit - reactjs

Question

First stackoverflow post. New to React (1 week) and using API fetch requests to understand props, state and components.
I'm using a weather API to get the temperature for a particular city. User enters city into a form, clicks submit and the temperature is displayed.
When I hard code the selectedCity state by typing in a city as a test, I can see in the DevTools that the API data is fetched for that city and the city's temperature is displayed in the browser. The issue is when I click submit on my form component. On submit I can see in the DevTools that it updates the selectedCity state with user's city of choice but it doesn't fetch the data. I've noticed that when hard coding in the city that the page refreshes and the data is fetched and result displayed but when submitted via the form there is no refresh of the page.
I just don't know enough about React to figure out what is going on here. Grateful for any pointers.
This is my WeatherContainer
import React, { Component } from 'react';
import Headings from '../components/Headings';
import Form from '../components/Form';
import Weather from '../components/Weather';
class WeatherContainer extends Component {
constructor(props) {
super(props);
this.state = {
weatherData: [],
selectedCity: ""
};
this.handleFormSubmit = this.handleFormSubmit.bind(this);
}
fetchData() {
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${this.state.selectedCity}&APPID=MyAPIKey`)
.then(res => res.json())
.then(result => this.setState({ weatherData: result.main }))
}
componentDidMount() {
this.fetchData();
}
handleFormSubmit({city}) {
this.setState({selectedCity: city})
}
render() {
return (
<div>
<Headings />
<Form onFormSubmit={this.handleFormSubmit} />
<Weather weather={this.state.weatherData} />
</div>
);
}
}
export default WeatherContainer;
This is my form component
import React, { Component } from 'react';
class Form extends Component {
constructor(props) {
super(props);
this.state = {
city: ""
};
this.handleCityChange = this.handleCityChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
const city = this.state.city;
if (!city) {
return
}
this.props.onFormSubmit({
city: city
});
this.setState({
city: ''
})
}
handleCityChange(event) {
this.setState({
city: event.target.value
})
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.city}
placeholder="Enter City"
onChange={this.handleCityChange}
/>
<input type="submit" value="Submit" />
{/* <button>Get Weather</button> */}
</form>
);
}
}
export default Form;
My Weather Component
import React from 'react';
const Weather = ({ weather }) => {
if(!weather) return null
return (
<div>
<h1>{weather.temp}</h1>
</div>
);
}
export default Weather;

Answer 1

So you have a componentDidMount method but you don't handle the updates of the state.
You need a componentDidUpdate method
componentDidUpdate(prevProps, prevState) {
if (prevState.city !== this.state.city) {
this.fetchData();
}
}