Weather data is not displaying

Question

I am creating a weather app that shows the city's current weather, and the next 7 days' data. I am able to display the current weather but am not able to display 7 days data on screen but it's clearly displaying all the data on the console. Could you please tell how can I display 7 days' data on the screen?

import React, {useState, useEffect } from 'react'

const Weather = () => {

const [searchValue, setSearchValue] = useState()
const [city, setCity] = useState([]);
const [dailystate, setDaily] = useState([]);
const [DataisLoaded, setDataisLoaded] = useState(false)

const getWeather = async () => {
    try{
        //city api
        const cityUrl = `https://api.openweathermap.org/data/2.5/weather?q=${searchValue}&units=metric&appid=751b74da5d70959c37a08c2677bb0a94`

        const resCity = await fetch(cityUrl);
        const cityData = await resCity.json();

        const { temp, pressure, humidity } = cityData.main;
        const { description } = cityData.weather[0];
        const obj = {
            temp, pressure, humidity, description
        }
        setCity(obj)

        // latitude & longitude
        const lat = cityData.coord.lat;
        const lon = cityData.coord.lon;

        // OneCall Api
        const oneCallapi = `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&units=metric&exclude=alerts,minutely,current&appid=751b74da5d70959c37a08c2677bb0a94`

        const resOneity = await fetch(oneCallapi);
        const cityOnedata = await resOneity.json();

            
        const daily = cityOnedata.daily;

        // getting 7 days data
        for(let i = 0 ; i < 7; i++){

            let dtsec = daily[i].dt;
            let Datedt = new Date(dtsec * 1000);
            let datetime = `${Datedt.toDateString().slice(0,4)}`;
            
            const data = {
                day: datetime,
                temp: daily[i].temp.day ,
                description: daily[i].weather[0].description
            }
            // storing state data in every iteration
            setDaily(dailystate => ([...dailystate, data]));
        }
        setDataisLoaded(true);
        console.log(DataisLoaded)
        console.log("daily state ", dailystate)
    }
    catch(error){ console.log("error is -- ",error) }
}
useEffect(() => {
    getWeather();

}, []);

return (
    <>
        <div>
            <input 
                type="search"
                placeholder='Enter city'
                value={searchValue}
                onChange={(e) => setSearchValue(e.target.value)}
            />

            <button
                type="button"
                onClick={getWeather}
                style={{padding:'6px'}}
            >
                Search
            </button>

            <br/><br/>
            <div style={{border:'1px solid black'}}>
                    temp:   {city.temp}<br/> 
                    pressure:  {city.pressure} <br/>
                    humidity:   {city.humidity} <br/>
                    description:   {city.description}
            </div>


            {/* displaying 7 days daily data */}

            {DataisLoaded === false ? 
                <div><h1> Please wait some time.... </h1></div>
                :
                <div>
                    {dailystate.map((curEle) =>{
                        <div style={{border:'1px solid black'}}>
                            <p>{curEle.day}</p>
                            <p>{curEle.temp}</p>
                            <p>{curEle.description}</p>
                            <br/> 
                        </div>
                        
                    })}
                    
                </div>
                
                }
            <br/>
        </div>
    </>
)
}

  export default Weather;

Answer 1

Your map doesn't return any html , this should fix your issue by adding a return in your map

{
  DataisLoaded === false ? (
    <div>
      <h1> Please wait some time.... </h1>
    </div>
  ) : (
    <div>
      {dailystate.map((curEle) => (
        <div style={{ border: '1px solid black' }}>
          <p>{curEle.day}</p>
          <p>{curEle.temp}</p>
          <p>{curEle.description}</p>
          <br />
        </div>
      ))}
    </div>
  );
}

don't forget the "Reconciliation" add a key for each element in map function