score:3

Accepted answer

you could create a separate fetch request for each city and use promise.all to put the result of both requests in the state when both requests have finished.

you can then use map on the weatherresults array to display the information about both cities in the render method.

example

class homepage extends component {
  state = {
    weatherresults: []
  };

  componentdidmount() {
    const cities = ["boston", "new york"];

    const promises = cities.map(city => {
      return fetch(`http://api.openweathermap.org/data/2.5/forecast?id=52490&units=imperial&appid=${api_key}&q=${city}&cnt=60`)
        .then(res => res.json());
    });

    promise.all(promises)
      .then(weatherresults => {
        this.setstate({ weatherresults });
      })
      .catch(error => console.error(error));
  }

  render() {
    const { weatherresults } = this.state;

    if (weatherresults.length === 0) {
      return null;
    }

    return (
      <div classname="container">
        {weatherresults.map(weatherresult => (
          <div key={weatherresult.city.id}>
            <h2>{weatherresult.city.name}</h2>
            <p>{weatherresult.list[0].main.temp}</p>
            <p>{weatherresult.list[0].weather[0].description}</p>
            <p>humidity: {weatherresult.list[0].main.humidity}</p>
            <p>wind: {weatherresult.list[0].wind.speed}</p>
          </div>
        ))}
      </div>
    );
  }
}

score:0

you can do something like this.

render() {
  const { weatherresults } = this.state;
     return (
         <div>
             { this.state.weatherresults.length &&
             <div classname = "container">
               <h2> { weatherresults.city.name}  </h2>
             </div>
             }
         { 
          this.state.weatherresults.list.map((ele, idx) => (
              <div>
               <p> {ele.main.temp}</p>
               <p> 
                 {ele.weather[0].description} 
              </p>
              <p> humidity: 
                 {ele.main.humidity} </p>
             <p> wind: {ele.wind.speed} </p>
         </div>
          ))
        }
      </div>
     );
   }
  }

essentially what i'm doing above is creating an array of react components and displaying them based on content in your list. now i'm not 100% sure what your json structure looks like so i just made assumptions based on the code you posted above.

if possible id move all the content related to the json into the map function.

this portion:

{ this.state.weatherresults.length &&
         <div classname = "container">
           <h2> { weatherresults.city.name}  </h2>
         </div>
         }

also it is recommended that each element in the array/map call have its own unique key that is not the index. so if the json contains some unique identifier like a primary key from a data base use it.

score:0

to render items from array in react you should use array.prototype.map().

for example:

  render() {
    const { weatherresults } = this.state;
    return (
      <div>
        {
          weatherresults.list.length > 0 && 
          weatherresults.list.map(item => (
            <div classname="container" key={weatherresults.city.id}>
              <h2> {item.city.name} </h2>
              <p> {item.main.temp}</p>
              <p>{item.weather[0].description}</p>
              <p>humidity: {item.main.humidity}</p>
              <p> wind: {item.wind.speed} </p>
            </div>
         ));
       }
      </div>
    );
  }

Related Query

More Query from same tag