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

• 0
  there are 2 components.
  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;

  
  
  How can I solve this problem?
  P.S. Please do not be clever and do not say that it is very easy or go learn again. Thanks in advance.

  JavaScript Anonymous, Aug 6, 2019

---

1 Answers
• 0

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

  
  
  
  
  Better yet, read about how functional components work.

  Anonymous

---