Fetching data from weather API using axios in Reactjs

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 sta…


This content originally appeared on DEV Community and was authored by Sandeep Kumar Patel

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)} &#8451;
                </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


This content originally appeared on DEV Community and was authored by Sandeep Kumar Patel


Print Share Comment Cite Upload Translate Updates
APA

Sandeep Kumar Patel | Sciencx (2021-05-22T14:32:56+00:00) Fetching data from weather API using axios in Reactjs. Retrieved from https://www.scien.cx/2021/05/22/fetching-data-from-weather-api-using-axios-in-reactjs/

MLA
" » Fetching data from weather API using axios in Reactjs." Sandeep Kumar Patel | Sciencx - Saturday May 22, 2021, https://www.scien.cx/2021/05/22/fetching-data-from-weather-api-using-axios-in-reactjs/
HARVARD
Sandeep Kumar Patel | Sciencx Saturday May 22, 2021 » Fetching data from weather API using axios in Reactjs., viewed ,<https://www.scien.cx/2021/05/22/fetching-data-from-weather-api-using-axios-in-reactjs/>
VANCOUVER
Sandeep Kumar Patel | Sciencx - » Fetching data from weather API using axios in Reactjs. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/22/fetching-data-from-weather-api-using-axios-in-reactjs/
CHICAGO
" » Fetching data from weather API using axios in Reactjs." Sandeep Kumar Patel | Sciencx - Accessed . https://www.scien.cx/2021/05/22/fetching-data-from-weather-api-using-axios-in-reactjs/
IEEE
" » Fetching data from weather API using axios in Reactjs." Sandeep Kumar Patel | Sciencx [Online]. Available: https://www.scien.cx/2021/05/22/fetching-data-from-weather-api-using-axios-in-reactjs/. [Accessed: ]
rf:citation
» Fetching data from weather API using axios in Reactjs | Sandeep Kumar Patel | Sciencx | https://www.scien.cx/2021/05/22/fetching-data-from-weather-api-using-axios-in-reactjs/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.