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

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!