First create react-app
using command in the terminal:
npx create-react-app weather
then install axios:
npm i axios
useState() is a hook in react functional component
it take useState returns an array of two values. The first value is the initial state and the second value is the function to update the value.
useState can be imported using :
import {useState} from react
or
const[value, setValue] = React.useState(initialstate)
import React from 'react'
import { useState } from 'react'
import "./style/Weather.css"
import axios from 'axios'
function App() {
const [weather, setWeather] = useState('');
const [city, setCity] = useState('');
const apiKey = process.env.REACT_APP_APIKEY;
const apiCall = async (e) => {
e.preventDefault()
const loc = e.target.elements.loc.value
const url = `https://api.openweathermap.org/data/2.5/weather?q=${loc}&appid=${apiKey}`;
const req = axios.get(url);
const res = await req;
setWeather({
descp: res.data.weather[0].description,
temp: res.data.main.temp,
city: res.data.name,
humidity: res.data.main.humidity,
press: res.data.main.pressure,
})
setCity(res.data.name)
}
//Converting K to C
let k = weather.temp;
let C = k - 273.15
const Weath = () => {
return <div>
<div className="winfo">
Weather information for {city}
<hr></hr>
</div>
<div className="Weath">
<div className="welement">
Weather : {weather.descp}
</div>
<div className="welement">
Temperature : {C.toFixed(2)} ℃
</div>
<div className="welement">
Humidity :{weather.humidity} %
</div>
<div className="welement">
Pressure : {weather.press} mb
</div>
</div>
</div>
}
return (<>
<div className="weathhead">Weather Info</div>
<div className="mainweather">
<div className="weather">
<form onSubmit={apiCall} className="form">
<input type="text"
placeholder="city"
name="loc" />
<button className="bttn">Search</button>
</form>
{weather && <Weath />}
</div>
</div>
</>
)
}
export default App
github: https://github.com/sandyabhi/kitrgh/blob/master/src/Weather.js
Top comments (0)