How can I return text with useState?

Question

I am waiting for the data (when the user submit) i fetch the data then return the Temperature with useState() but i wanted to return a header with it like Temperature:12°C.

Something else is that i wanna round the temperature to 2 decimal places but i don't know how to do so

here is my code:

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;

Looks like you are trying to `setTemp()` before you receive the fetched data. You will need to show more code and also identify any errors you are seeing in dev tools console. See [ask] and [mre] — charlietfl, Dec 26 '21 at 20:50

Andrew · Answer 1 · 2021-12-26T20:58:02.420

1

Add a useEffect hook so your component re-renders after your temp state changes.

useEffect(() => {}, [temp]);

In order to round to two decimal places...well, usually I don't like telling people this but that's an extremely easy thing to find out from just using Google or another search engine.

JavaScript math, round to two decimal places

edited Dec 26 '21 at 20:58

answered Dec 26 '21 at 20:51

Andrew

432
2
14

Lahcen · Answer 2 · 2021-12-26T21:11:22.387

0

You can do like this

 const [temp, setTemp] = useState('')
     setTemp(response.data.main.feels_like-273.15+'°C');
        return (
    <div>
        <h1 className="temp"> Temperature {temp?.toFix(2)}</h1>
    </div>
)

edited Dec 26 '21 at 21:11

answered Dec 26 '21 at 20:59

Lahcen

1,231
11
15

score 0 · Accepted Answer · answered Dec 26 '21 at 21:01

0

You could do it like:

`Temperature ${(response.data.main.feels_like-273.15).toFixed(2)} °C`

answered Dec 26 '21 at 21:01

Muhammad Hassan Khan

149
5

Marc Espín · Answer 4 · 2021-12-26T20:59:39.180

Could you please provide the full component's code, or at least where is response coming from? Anyway, If the response is being passed from a parent component, then I see no reason to use useState at all.

But if you are fetching the data in the same component, then you need to fetch the data asynchronously:


function component(){
    const [temp, setTemp] = useState('Loading temperature...')

    useEffect(() => {
       fetchTemp().then((response) => {
          setTemp(response.data.main.feels_like-273.15+'°C');
       })
    }, [])

    
    return (
        <div>
          <h1 className="temp">{temp}</h1>
        </div>
    )
}

About rounding the number, you can use toFixed(decimals) method.

Example:

let number = 900.1234
console.log(number.toFixed(2))

How can I return text with useState?

4 Answers4