Can I use multiple api request to populate data in React Component?

Question

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?

Here is my 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 => fetch(url))
        Promise.all(requests)
            .then(responses => {
                return Promise.all(responses.map(response => response.json()));
            }).then(responses => {
                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 => {
            return market

        })

        return (
            <div className="enterstock">
                <h1 className="title">Enter Stock Symbol</h1>
                <span className="symbol">{this.state.userInput}</span>
                <form className="inputfields" onSubmit={this.getSymbol}>
                    <input type="text" className="symfields" name="symbolname" onChange={this.typeSymbol}></input>
                </form>
                {stockSymbol.map((stock, i) => {
             

// 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 (
                            <ul className="symboldescription" key={i}>
                                <li key={i}>{stock.name}</li>
                                <li key={i}>{markets.volume}</li>
                            </ul>,
                            console.log(markets.symbol)
                        )
                    }
                })}
            </div>
        )

    }
}

Answer 1

You can solve this by doing a find on marketData and filter on stock data. I have attached the working code snippet, you dont need the over complicated condition.

Hope this is helpful :)

class Thingy extends React.Component {
  constructor() {
    super();
    this.state = {
      stockSymbol: [],
      userInput: "",
      marketData: [],
    };
  }

  componentDidMount() {
    const urls = [
      `https://api.iextrading.com/1.0/ref-data/symbols`,
      `https://api.iextrading.com/1.0/tops`,
    ];

    let requests = urls.map((url) => fetch(url));
    Promise.all(requests)
      .then((responses) => {
        return Promise.all(responses.map((response) => response.json()));
      })
      .then((responses) => {
        this.setState({
          stockSymbol: responses[0],
          marketData: responses[1],
        });
      });
  }

  typeSymbol = (e) => {
    this.setState({
      userInput: e.target.value,
    });
  };

  render() {
    const { stockSymbol, userInput, marketData } = this.state;

    const filteredSymbols = stockSymbol.filter(
      (sym) => sym.symbol === userInput
    );
    const foundMarket = marketData.find(
      (market) => market.symbol === userInput
    );
    return (
      <div className="enterstock">
        <h1 className="title">Enter Stock Symbol</h1>
        <span className="symbol">{this.state.userInput}</span>
        <input
          type="text"
          className="symfields"
          name="symbolname"
          onChange={this.typeSymbol}
        />
        {filteredSymbols.map((stock, i) => {
          return (
            <ul className="symboldescription" key={i}>
              <li>Stock Name: {stock.name}</li>
              <li>Relevant Market Volume: {foundMarket.volume}</li>
            </ul>
          );
        })}
      </div>
    );
  }
}




ReactDOM.render(
  <Thingy />,
  document.getElementById("app")
);

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>