title: Can I use multiple api request to populate data in React Component?
body: <p><a href="https://i.stack.imgur.com/OrPu8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OrPu8.jpg" alt="enter image description here" /></a><a href="https://i.stack.imgur.com/dEg0F.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dEg0F.jpg" alt="enter image description here" /></a>This is kind of hard to explain. I have two API request from the same origin but the responses both contain something I need. I am trying to populate information on the screen when the user types in a symbol, however I can't get the information to show up when I return it from my conditional statement. I have tried to work out multiple conditional statement but I can't seem to figure out what to do. Can anyone point me in the right direction?</p>
  <p>Here is my code:</p>
  <pre><code>// Here are the two urls that contain the data I need
  
  const urls = [
              `https://api.iextrading.com/1.0/ref-data/symbols`,
              `https://api.iextrading.com/1.0/tops`
          ]
  
  
          let requests = urls.map(url =&gt; fetch(url))
          Promise.all(requests)
              .then(responses =&gt; {
                  return Promise.all(responses.map(response =&gt; response.json()));
              }).then(responses =&gt; {
                  this.setState({
                      stockSymbol: responses[0],
                      marketData: responses[1]
  
                  })
                  console.log(this.state.stockSymbol)
                  console.log(this.state.marketData)
              })
  
      }
  
  
      render() {
          const { stockSymbol, userInput, marketData } = this.state
  
          // here is where i map out the response for the 2nd url to populate info that goes in the conditional statement
  
  const markets = marketData.map(market =&gt; {
              return market
  
          })
  
          return (
              &lt;div className=&quot;enterstock&quot;&gt;
                  &lt;h1 className=&quot;title&quot;&gt;Enter Stock Symbol&lt;/h1&gt;
                  &lt;span className=&quot;symbol&quot;&gt;{this.state.userInput}&lt;/span&gt;
                  &lt;form className=&quot;inputfields&quot; onSubmit={this.getSymbol}&gt;
                      &lt;input type=&quot;text&quot; className=&quot;symfields&quot; name=&quot;symbolname&quot; onChange={this.typeSymbol}&gt;&lt;/input&gt;
                  &lt;/form&gt;
                  {stockSymbol.map((stock, i) =&gt; {
               
  
  // here is where if the user inputs a stock symbol, the name of the company shows up,
                 but here is where i want information from the 2nd url to populate the my return 
                when a user inputs a symbol
  
                      if (userInput === stock.symbol) {
                          return (
                              &lt;ul className=&quot;symboldescription&quot; key={i}&gt;
                                  &lt;li key={i}&gt;{stock.name}&lt;/li&gt;
                                  &lt;li key={i}&gt;{markets.volume}&lt;/li&gt;
                              &lt;/ul&gt;,
                              console.log(markets.symbol)
                          )
                      }
                  })}
              &lt;/div&gt;
          )
  
      }
  }
  </code></pre>