title: how to make multiple api calls in one action (one button)
body: <p>i have an api call to fetch some astronomy data f  and an api call to fetch weather data from openweather , i would like to combine them into one function , so that when the user clicks the search button it will display data from both the api calls but am not sure how to achieve this. I tried the below but its not working. Any help is greatly appreciated.!  </p>
  
  <p>layout.js </p>
  
  <pre><code>import React from 'react'; 
  import ReactDOM from 'react-dom';
  import { Button } from 'react-bootstrap';
  import Weather from './Weather';
  import Form from './Form';
  import Nav from './Nav';
  import './layout.css';
  const API_KEY = "";
  
  class Layout extends React.Component {
    constructor(props) {
      super(props);
      this.state = this.props;
  
      this.getTrail=this.getTrail.bind(this);
         this.getDate=this.getDate.bind(this);
    }
  
  
  
    getTrail = async (e) =&gt; {
      e.preventDefault();
  
  
      const city = e.target.city2.value;
      this.setState({
        show: !this.state.show
      });
  
      const country = e.target.country.value;
  
  
      const api_call = await fetch(`https://api.wunderground.com/api/b1049a092a7f69ea/astronomy/q/${country}/${city}.json`);
      const api_call2 = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&amp;appid=${API_KEY}&amp;units=metric`);
  
  const data2 = await api_call.json();
      const data = await api_call.json();
  
      if (city) {
        this.setState({
          moon_phase: data.moon_phase.ageOfMoon,
          moon_hour: data.moon_phase.hemisphere,
          moon_rise: data.moon_phase.moonrise.hour,
          moon_rises: data.moon_phase.moonrise.minute,
          moon_state: data.moon_phase.phaseofMoon,
          moon_set: data.moon_phase.moonset.hour,
          moon_sets: data.moon_phase.moonset.minute,
          sunset: data.sun_phase.sunset.hour,
          sunsets: data.sun_phase.sunset.minute,
          sunrise: data.sun_phase.sunrise.hour,
            temperature: data2.main.temp,
          city: data2.name,
          clouds: data2.clouds.all,
          main: data2.weather[0].main,
          icon: data2.weather[0].icon,
          rain: data2.rain,
          pressure: data2.main.pressure,
          humidity: data2.main.humidity,
          description: data2.weather[0].description,
          sunrises: data2.sun_phase.sunrise.minute,
           error: ""
  
  
        });
      } else {
        this.setState({
          moon_phase: undefined,
          sunset: undefined
        });
      }
  
  
  var clouds = data.clouds.all;
  
      if (clouds &gt; 30) {
        this.setState({
          msg: " Poor  conditions for stargazing!! "
        })
      }
      else {
  
        this.setState({
          msg: " Good conditions for stargazing! no rain in forecast! "
        })
      }
  
    }
    getDate() {
      var date = new Date().getDate();
      var month = new Date().getMonth() + 1;
      var year = new Date().getFullYear();
  
      this.setState({ date, year, month });
  
    }
  
    componentDidMount() {
      this.getDate();
    }
  
    render() {
       return(
  
        &lt;div&gt;
      &lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;
      &lt;Nav /&gt;
  
  
      &lt;p&gt; Search bellow &lt;/p&gt;
        &lt;div className="c"&gt;
  
      &lt;div className="row"&gt;
  
  &lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;
        &lt;div id="city"&gt;
  
  
   &lt;h3&gt; {this.state.msg} &lt;/h3&gt;
  
  
  
  
  
  
  
  
                    &lt;Weather className="fish"
                      city={this.state.city}
                      temperature={this.state.temperature}
                      humidity={this.state.humidity}
                   clouds={this.state.clouds}
                         pressure={this.state.pressure}
                      description={this.state.description}
                      rain={this.state.rain}
                      icon={this.state.icon}
                      error={this.state.error}
                    /&gt;
  
        &lt;div className="date"&gt;&lt;p id="d"&gt; {this.state.date}/{this.state.month}/{this.state.year}&lt;/p&gt; 
  
  
  &lt;div&gt;
      &lt;Form getTrail={this.getTrail} /&gt;
  
  
  
  
  
  
                {this.state.moon_phase &amp;&amp;   &lt;div&gt; moon_phase: {this.state.moon_phase}&lt;/div&gt;  }
                 {this.state.sunset &amp;&amp; this.state.sunsets &amp;&amp; &lt;div className="row"&gt; &lt;p&gt; sunset Time: {this.state.sunset} &lt;/p&gt; : &lt;p&gt; {this.state.sunsets} &lt;/p&gt; &lt;/div&gt; }
  
                 {this.state.sunrise &amp;&amp; this.state.sunrises &amp;&amp;  &lt;div className="row"&gt; &lt;p&gt; sunrise  Time: {this.state.sunrise} &lt;/p&gt; : &lt;p&gt; {this.state.sunrises} &lt;/p&gt;&lt;/div&gt; }
  
                     {this.state.moon_set &amp;&amp; this.state.moon_sets &amp;&amp; &lt;div className="row"&gt; &lt;p&gt; moonset:  {this.state.moon_set} &lt;/p&gt; : &lt;p&gt; {this.state.moon_sets} AM&lt;/p&gt; &lt;/div&gt; }
  
                  &lt;div className="w-100"&gt; &lt;/div&gt;
                    {this.state.moon_rise &amp;&amp; this.state.moon_rises &amp;&amp;    &lt;div className="row"&gt;     &lt;p&gt;moonrise - {this.state.moon_rise} &lt;/p&gt; : &lt;p&gt; {this.state.moon_rises} PM&lt;/p&gt; &lt;/div&gt; }
  
  
  
                 {this.state.moon_state &amp;&amp;   &lt;p&gt; {this.state.moon_state} moon  &lt;/p&gt; }
                 {this.state.moon_hour &amp;&amp; &lt;p&gt; hemisphere: {this.state.moon_hour} &lt;/p&gt;  }
   &lt;/div&gt;
  
   &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;/div&gt;
   &lt;/div&gt; 
   &lt;/div&gt;
  
   );
    }
  }
   export default Layout;
  </code></pre>
  
  <p>form.js </p>
  
  <pre><code>import './App.css';
  
  import React from 'react';
  import PropTypes from 'prop-types';
  
  const Form = props =&gt; (
  
  
  
      &lt;div className="wrap2"&gt;
            &lt;div className="form-row align-items-center"&gt;
  
  
            &lt;div className="col-auto"&gt;
          &lt;form className="form-inline" onSubmit={props.getTrail}&gt;
  
  
              &lt;label htmlFor="email"&gt;City&lt;/label&gt;
              &lt;input type="text" className="form-control mb-2 mr-sm-2 mb-sm-0"  id="inlineFormInput" name="city2" placeholder="City..." /&gt;
  
              &lt;div className="input-group mb-2 mr-sm-2 mb-sm-0"&gt;
                  &lt;div className="input-group-addon"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;label htmlFor="email"&gt;State&lt;/label&gt;
  
              &lt;input type="text" step="any" className="form-control" name="country" placeholder="State.." /&gt; &lt;br&gt;&lt;/br&gt;
              &lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;
              &lt;button className="btn btn-success"&gt;Search&lt;/button&gt;
  
          &lt;/form&gt;
  
      &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;/div&gt;
  );
  
  
  
  
  export default Form; 
  
  
  
  export default App;
  </code></pre>