How can I return text with useState?-CodePudding

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;

CodePudding user response：

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

CodePudding user response：

You could do it like:

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

CodePudding user response：

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>
)

CodePudding user response：

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))