How do I solve TypeError: Cannot read property 'gettingWeather' of undefined?

Question

JavaScript

there are 2 components.
one)

import React from "react";
import ReactDOM from "react-dom";
import Info from "./components/info";
import Form from "./components/form";
import Weather from "./components/weather";

const API_KEY = "c4a63d329f2ce2e7f45535735ea17783"

function App() {

  const gettingWeather = async (e) => {
    e.preventDefault();
    const api_url = await
    fetch(`https://api.openweathermap.org/data/2.5/weather?q=Kiev&appid=${API_KEY}&units=metric`);
    const date = await api_url.json();
    console.log(date);
  }

  return(
    <>
      <Info />
       <Form weatherMethod={this.gettingWeather} />
      <Weather />
    </>
  )
}


ReactDOM.render(
  <App />,
  document.getElementById("root")
)

2)

import React from "react";

function Form() {
  return(
    <form onSubmit={this.props.weatherMethod}>
      <input type="text" name="city" placeholder="Город"/>
      <button>Получить погоду</button>
    </form>
  )
}

export default Form;

How can I solve this problem?
PS Please do not be smart and do not say that it is very simple or go learn again. Thanks in advance

Answer 1

// --------------------------- ИЗ ПЕРВОГО КОМПОНЕНТА --------------------------- 
return(
    <>
      <Info />
       <Form weatherMethod={gettingWeather} />
      <Weather />
    </>
  )

// --------------------------- ИЗ ВТОРОГО КОМПОНЕНТА --------------------------- 
function Form({weatherMethod}) {
  return(
    <form onSubmit={weatherMethod}>
      <input type="text" name="city" placeholder="Город"/>
      <button>Получить погоду</button>
    </form>
  )
}

Read more about how functional components work.