While creating a simple react weather app, I encountered an issue. The app was functioning perfectly until I added a material-ui button. Now, the app only works when I press enter and not when I click on the button. It seems that the material-ui code
const city = e.target.elements.city.value; return (
<div>
<form onSubmit={props.getWeather}>
<p>Just type the city name </p>
<p className="check">you must spelling correctly</p>
<TextField
id="standard-basic"
name="city"
placeholder="City....."
variant="outlined"
/>
<Button onClick={props.getWeather} variant="contained" color="primary">
find
</Button>
</form>
</div>
);
};
export default Form;
And in the app component:
getWeather = async e => {
e.preventDefault();
const city = e.target.elements.city.value;
const api = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${API_KEY}`
);
const data = await api.json();