Display image from .map array (React)

Question

        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.

Viet · Accepted Answer · 2021-09-09 01:31:21Z

1

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.

answered Sep 9, 2021 at 1:31

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sanish Joseph · Accepted Answer · 2021-09-09 01:29:26Z

Not sure why you are doing it, but setting JSX in your state seems strange.

Try something like this, assuming res2.data.list has the list of values.

<div className="five_day_forecast">
        <div className="temp_body">
          // Display here with Date/Time & Main Temp.
          <p>
            {res2.data.list && res2.data.list.length >0 && 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>
            ])}
          </p>
        </div>
      </div>

Andy · Accepted Answer · 2021-09-09 01:43:53Z

Putting markup in state is a weird anti-pattern. State is really there to just store data not markup. You can use a function to create the JSX from mapping over the data.

You should be adding the source of the image to the src attribute of the img element.

Keys should be added to parent elements.

const imgSrc = `https://openweathermap.org/img/w/${item.weather[0].icon}.png`;
<img src={imgSrc} />

// `fetch` your data, and add it to state
setForecast(res2.data.list);

// `map` over the data and create the markup
function getMarkup() {

  const imgSrc = `https://openweathermap.org/img/w/${item.weather[0].icon}.png`;

  return forecast.map(item => {
    <div className="each_data_point" key={item.dt_txt}>
      <li className="date_time">{`Date & Time: ${item.dt_txt}`}</li>,
      <img src={imgSrc} className="icon" />,
      <li className="main_temp">{`Temp: ${item.main.temp}`}</li>
    </div>
  });

}

return (
  <div>
    <div className="five_day_forecast">
      <div className="temp_body">

        // Call the function to return the markup
        // build from state
        {getMarkup()}
    </div>
  </div>
);

Collectives™ on Stack Overflow

Display image from .map array (React)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related