Estoy esperando los datos (cuando el usuario los envía), busco los datos y luego devuelvo la temperatura con useState() pero quería devolver un encabezado como Temperature:12°C .
Otra cosa es que quiero redondear la temperatura a 2 decimales pero no se como hacerlo
aquí está mi código:
import axios from 'axios'; import React from 'react' import {useState, useEffect} from 'react' import './style.css' import rain from './use1.png' function App() { const [name,setName] = useState('Cairo') const [res, setRes] = useState(null) const [pic, setPic] = useState(null) const [temp, setTemp] = useState('') const getApi = e => { axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${name}&appid=my_key`) .then(response=> { console.log(response.data); setRes(response.data.name) setTemp(response.data.main.feels_like-273.15+'°C'); Math.round(temp) setPic(`https://openweathermap.org/img/w/${response.data.weather[0].icon}.png`) })} const handleChange = e => { setName(e.target.value); }; return ( <div> <img className="wallpaper" src={rain}></img> <div className="content"> <input placeholder="Search.." className="input" onChange={handleChange}></input> <a href="#" type="submit" onClick={getApi}><i id="icon" className="fa fa-search"></i></a> </div> <div className="content2"> <h1 className="name">{res}</h1> <img src={pic}></img> <h1 className="temp">{temp}</h1> </div> </div> ); } export default App;Agregue un gancho useEffect para que su componente se vuelva a renderizar después de que cambie su estado temp .
useEffect(() => {}, [temp]);Para redondear a dos decimales... bueno, por lo general no me gusta decirle esto a la gente, pero eso es algo extremadamente fácil de averiguar simplemente usando Google u otro motor de búsqueda.
Puedes hacer esto
const [temp, setTemp] = useState('') setTemp(response.data.main.feels_like-273.15+'°C'); return ( <div> <h1 className="temp"> Temperature {temp?.toFix(2)}</h1> </div> )Podrías hacerlo como:
`Temperature ${(response.data.main.feels_like-273.15).toFixed(2)} °C`