loading-container-weather-page.jsx

// WeatherPage.js

class WeatherPage extends React.Component {
  constructor() {
    this.state = {
      loading: true,
      temperature: null,
      error: null,
    }
  }

  componentWillMount() {
    axios.get('http://api.some-weather-service.com/temperature').then((data) => {
      this.setState({
        temperature: data.temperature,
        loading: false
      });
    }).catch((data) => {
      this.setState({
        error: "We had a problem requesting temperature data",
        loading: false
      });
    });
  }

  render() {
    let content;

    if (this.loading) {
      content = (
        <div>
          Loading...
        </div>
      );
    } else if (this.error !== null) {
      content = (
        <div className="alert alert-danger" role="alert">
          <span className="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
          {this.error}
        </div>
      );
    } else {
      <p>
        { this.state.temperature }
      </p>
    }

    return (
      <div>
        <h1>Weather</h1>
        <h2>Todays temperature</h2>
        { content }
      </div>
    );
  }
}