Как мне решить ошибку TypeError: Cannot read property 'gettingWeather' of undefined?

Question

[Артем Владиленко]

есть 2 компонента.
1)

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;

Как мне решить эту проблему?
P.S. Просьба не умничать и не говорить что это очень просто или иди учи заново.Заранее спасибо

Answer 1

[hellcaster]

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

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

А лучше прочитайте о работе функциональных компонентов