How to Do Multiple API Requests In ReactJS Using Axios

Create a new folder and call it MultipleRequests. Within the MultipleRequests folder create a new react app using.

npx create-react-app multiplerequests

Once the app is installed, within the master directory of the app, install Axios, by doing npm axios. Inside of your src/index.js file.

npm axios

We will work within the src/App.js file so go ahead and open it up. Startup the app using npm start.

npm start

Go ahead and clear all the information within the App.js file and make it look like the one below.

<!-- This is App.js -->
import React from 'react';
import "./App.css";

const App = () => {
  return (
    <div className="App">

    </div>
    )
}

export default App;

Now we will import axios, useState, and useEffect from React.

<!-- App.js -->

import React, { useState, useEffect } from "react";
import axios from "axios";

Now we will create two useState variables inside of our app variable, one will be used for getting a players image and a players name.

<!-- App.js -->
  const [playerName, setPlayerName] = useState([]);
  const [playerPic, setPlayerPic] = useState([]);

Now we will create a function called fetchData and create two variables one for the player image and the other for the name. Then we will create two different get requests and refer them to new variables.

<!-- App.js -->
  const fetchData = () => {
    const playerAPI = "https://www.balldontlie.io/api/v1/players/237"
    const playerPic = "https://nba-players.herokuapp.com/players/james/lebron"

    const getNBAPlayer = axios.get(playerAPI)
    const getPlayerPic = axios.get(playerPic)
  }

Now we will use axios.all in and put getNBAPlayer and getPlayerPic in an array and using axios spread we will create a variable called allData that will contain all of our API request data. we can use array indexing to target our API requests.

<!-- App.js -->
  const fetchData = () => {
    const playerAPI = "https://www.balldontlie.io/api/v1/players/237"
    const playerPic = "https://nba-players.herokuapp.com/players/james/lebron"

    const getNBAPlayer = axios.get(playerAPI)
    const getPlayerPic = axios.get(playerPic)
    axios.all([getNBAPlayer, getPlayerPic]).then(
      axios.spread((...allData) => {
        const allDataPlayer = allData[0].data.first_name
        const getNBAPlayerPic = allData[1].config.url

        setPlayerName(allDataPlayer)
        setPlayerPic(getNBAPlayerPic)
      })
    )
  }

Now we will setPlayerName to allDataPlayer and setPlayerPic to getNBAPlayerPic. We will now create a useEffect function and run our fetchData function within it.

<!-- App.js -->
  useEffect(() => {
    fetchData()
  }, [])

We will now render our playerName and player pic within our return

<!-- App.js -->
  return <div className="App">
    Player Name is: {playerName}
    <img src={playerPic}/>
  </div>

Final Code:

App.js

import React, { useState, useEffect } from "react";
import axios from "axios";
import "./App.css";

const App = () => {
  const [playerName, setPlayerName] = useState([]);
  const [playerPic, setPlayerPic] = useState([]);

  const fetchData = () => {
    const playerAPI = "https://www.balldontlie.io/api/v1/players/237"
    const playerPic = "https://nba-players.herokuapp.com/players/james/lebron"

    const getNBAPlayer = axios.get(playerAPI)
    const getPlayerPic = axios.get(playerPic)
    axios.all([getNBAPlayer, getPlayerPic]).then(
      axios.spread((...allData) => {
        const allDataPlayer = allData[0].data.first_name
        const getNBAPlayerPic = allData[1].config.url

        setPlayerName(allDataPlayer)
        setPlayerPic(getNBAPlayerPic)
      })
    )
  }
  useEffect(() => {
    fetchData()
  }, [])
  return <div className="App">
    Player Name is: {playerName}
    <img src={playerPic}/>
  </div>
};

export default App;

You have now learned how to render multiple API requests using React and Axios. Hope it helped!😃