Display image from .map array (React)

        setForecast(res2.data.list.map(item => [
          <div className="each_data_point">
            <li className="date_time" key={item.dt_txt}>{`Date & Time: ${item.dt_txt}`}</li>,
            <img className="icon" key={item.weather[0].icon}>{`https://openweathermap.org/img/w/${item.weather[0].icon}.png`}</img>,
            <li className="main_temp" key={item.main.temp}>{`Temp: ${item.main.temp}`}</li>
          </div>
        ]
        ))
        
        
        ......
        
        
        return (
        <div>
        <div className="five_day_forecast">
            <div className="temp_body">
            
            // Display here with Date/Time & Main Temp.
                <p>{forecast}</p>

            </div>
            </div>

Is it possible to render an image from array.map() within React. When I run this, the DOM clears completely to white screen.

Answer

Using src in the img tag to render image

 <img className="icon" key={item.weather[0].icon} src={`https://openweathermap.org/img/w/${item.weather[0].icon}.png`} />

And put the key in div instead in the children.