title: How to get promise value to react component?
body: <p>I am trying get data from an api endpoint and display it on a react component. </p>
  
  <p>When I am formulating components depending on the data from <code>state.trainData</code> by mapping, I also require to get data from another api endpoint for each of the elements of <code>state.trainData</code>. </p>
  
  <p>I am using a helper function to fetch me data but thats where i hit a roadblock. I do get the data fine but <strong>the problem is</strong> I can not get it out on a variable or so to place it in a component.</p>
  
  <p>In the render function after the call of <code>getSpecificTrainDetails</code>, I got the data on <code>response.data</code>. I have been trying for two hours to figure out how to take the data and place it in the desired component but I reached nowhere! Help would be very much appreciated.</p>
  
  <pre><code>componentDidMount = () =&gt; {
      axios.get('https://rata.digitraffic.fi/api/v1/live-trains?station=SLO')
        .then((response) =&gt; {
          //console.log(response.data);
          this.setState({
            trainData: response.data,
          });
        }).catch((error) =&gt; {
          console.log(error);
        });
    }
  
      getSpecificTrainDetails = (trainNum, date) =&gt; {
              let apiLink = "https://rata.digitraffic.fi/api/v1/compositions/";
              let apiConstructedLink = apiLink + trainNum + "?departure_date=" + date;
              return axios.get(apiConstructedLink)
              .then((response) =&gt; {
                return response;
              }).catch((error) =&gt; {
                console.log(error);
              });
            }    
  
      render(){   
          let content = this.state.trainData.map((item, i) =&gt; {
              this.getSpecificTrainDetails(item.trainNumber, item.departureDate).then((response) =&gt; {
                              console.log(response.data);
                            });
  
                            return &lt;Popup key={i}
                                  &lt;Card&gt; //VALUE FROM 1ST API GOES HERE!!! &lt;/Card&gt;
                                   // VALUE FROM 2ND API GOES HERE!!
                                  &lt;/Popup&gt;;
                          });
      }
  </code></pre>
  
  <p>For example from the 1st api i get the trains number and date and with this date and number passed along to the 2nd api i get the trains details.</p>