How to properly use the useState hook?

Question

React

Good afternoon. I just started learning react and decided to make a simple website with an API request. After everything was done, my friend said that now everything is done through functions and gave me the task of rewriting. Faced a problem I don't understand how to use useState in my given situation.

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

const API_KEY = "8d5a4991e514824fa47a9a4ecdf6302f";

function App() {

    const state = {
        temp: undefined,
        city: undefined,
        country: undefined,
        pressure: undefined,
        sunset: undefined,
        error: undefined
    }

 const gettingWeather = async (e) => {
     e.preventDefault();
     const city = e.target.elements.city.value;

     if(city) {
         const api_url = await
         fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`);
         const data = await api_url.json();

         const sunset = data.sys.sunset;
         const date = new Date();
         date.setTime(sunset);
         const sunset_date = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

         this.setState({
             temp: data.main.temp,
             city: data.name,
             country: data.sys.country,
             pressure: data.main.pressure,
             sunset: sunset_date,
             error: undefined
         });
     } else {
       this.setState({
           temp: undefined,
           city: undefined,
           country: undefined,
           pressure: undefined,
           sunset: undefined,
           error: "Введите название города"
       });
     }
 }

        return(
            <div className="wrapper">
                <div className="main">
                    <div className="container">
                        <div className="row">
                            <div className="col-sm-5 info">
                                <Info />
                            </div>
                                <div className="col-sm-7 form">
                                    <Form weatherMethod={gettingWeather} />
                                    <Weather
                                        temp={state.temp}
                                        city={state.city}
                                        country={state.country}
                                        pressure={state.pressure}
                                        sunset={state.sunset}
                                        error={state.error}
                                    />
                                </div>
                        </div>
                    </div>
                </div>
            </div>

        );
}

export default App;

Answer 1

I don't understand how to convert this.State to useState.

read, understand