title: Turn a loop into array mapping
body: <p>This is my current code</p>
  
  <pre><code>for (let i = 0; i &lt; weatherData.list.length; i += 8) {
      arrTemp.push(
      &lt;div className="display-conditions"&gt;
          &lt;p className="display-conditions-item"&gt;Location : {weatherData.city.name}, {weatherData.city.country}&lt;/p&gt;
          &lt;p className="display-conditions-item"&gt;Temperature: {kelvinToCelsius(weatherData.list[i].main.temp)} C&lt;/p&gt;
          &lt;p className="weather-condition-container display-conditions-item"&gt;
              &lt;img className="img-fluid" alt="icon" src={`http://openweathermap.org/img/w/${weatherData.list[i].weather[0].icon}.png`} /&gt;
              Weather Condition: &lt;em&gt;{weatherData.list[i].weather[0].description}&lt;/em&gt;
          &lt;/p&gt;
          &lt;p className="display-conditions-item"&gt;Humidity: {weatherData.list[i].main.humidity}&lt;/p&gt;
          &lt;p className="display-conditions-item"&gt;Wind Speed: {weatherData.list[i].wind.speed}&lt;/p&gt;
      &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>This is how I currently use it:</p>
  
  <pre><code>weatherDataCondition : res.data.list.map((main,i) =&gt; (main))
  </code></pre>
  
  <p>but I want to access it like this:</p>
  
  <pre><code>{weatherData.list[i].weather[0].description}
  </code></pre>