How to display API data in the console and so that there is no page reload?

Question

React

I'm making a weather app.
The API that will display the weather for the city of London in the application was taken from the site https://openweathermap.org.
When I enter london in the form and press the button, the weather data should appear in the console, but it is not there, and the page reloads after the button is pressed. event.preventDefault wrote but still the page reloads. I think that the fact that there is no data in the console may be due to the page reloading, but I'm not sure.
App.js file code:

import React from "react";              	
import Info from "./components/info";  
import Form from "./components/form";  	
import Weather from "./components/weather";  	
  
const API_KEY ="89fdfjkd83434jfdfd438823fd";	
  
class App extends React.Component {    
    
    
gettingWeather = async (event) => {	
    event.preventDefault();
    const api_url = await fetch(`https://samples.openweathermap.org/data/2.5/weather?q=London&appid=${API_KEY}`);	
    const data = await api_url.json();	
    console.log(data);
}

 render (){                              
     return (                            	
             <div>	
                <Info />	
                <Form wetherMethod={this.gettingWether} />	
                <Weather />
           </div>	
  );	
  }	
}	
export default App;

What is the problem?

Answer 1

what's in the Form?

<form onSubmit={e => this.props.gettingWeather(e)}> 
.....

?