{cloud_pct , feels_like , humidity , max_temp , min_temp , sunrise , sunset , temp , wind_degrees , wind_speed}
{ data ? data.map(({cloud_pct , feels_like , humidity , max_temp , min_temp , sunrise , sunset ,temp , wind_degrees , wind_speed},id)=>( Cloud_Pact : {cloud_pct} Feels_Like : {feels_like} Humidity : {humidity} Max_Temp : {max_temp} Min_Temp : {min_temp} Sunrise : {sunrise} Sunset : {sunset} Temp : {temp} °C Wind_Degrees : {wind_degrees} Wind_Speed : {wind_speed} )) :null }
{ data? <VStack mt={5}>
<Button>Cloud_Pact : {data[0].cloud_pct}</Button>
<Button>Humidity : {data[0].humidity } %</Button>
<Button>Temp : {data[0].temp} °C</Button>
</VStack> :null
}
wheather
import React from 'react' import { useState } from 'react'; import { useEffect } from 'react'; const Wheather = () => { const [data,setData] =useState([]) const [query ,setQuery] =useState("delhi")
// data ===undefined?console.log("satrt :" ,data) : console.log("empty :", data)
const getData = async(query="delhi")=>{
// console.log(query)
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': '235bbe7c40mshc100adf39dcd554p17cd37jsn4c6a0cf66021',
'X-RapidAPI-Host': 'weather-by-api-ninjas.p.rapidapi.com'
}
};
const res= await fetch(`https://weather-by-api-ninjas.p.rapidapi.com/v1/weather?city=${query}`, options)
const d = await res.json()
// console.log(data)
return d
// .then(response => response.json())
// .then(response => console.log(response))
// .catch(err => console.error(err));
}
useEffect(()=>{
// getData(query).then((result)=>setData([{...result}]))
// setData(result)
},[query])
const handleChange = (e)=>{
setTimeout(()=>{
setQuery(e.target.value)
// console.log("working")
},5000)
}
return (
) }export default Wheather