React how to combine data from multiple API and render it-CodePudding

I need to fetch the data from the multiple API and need to render it. I have wrote the code to fetch the data from multiple API am getting the data as expected. The data I am getting is in nested array format. I can't able to populate the data by interpolating the state. Since the data is in nested format I need to map it, since I am having multiple API call, I'm struggling to combine and map all the data from the API. How to combine all the data and perform map and render the data. Any body can guide me what I have to do to achieve this. Thanks in advance. I have wrote down the API call and data format I am getting.

   API Call:
    
     const [nanOne, setNanOne] = useState([]);
      const [nanTwo, setNanTwo] = useState([]);
      //   const [batch, setBatch] = useState([]);
    
      const fetchData = () => {
        const UserAPI = "https://reqres.in/api/users/2";
        const AirlineAPI = "https://reqres.in/api/users/2";
    
        const getUserData = axios.get(UserAPI);
        const AirlineData = axios.get(AirlineAPI);
    
        axios.all([getUserData, AirlineData]).then(
          axios.spread((...allData) => {
            console.log("data", allData.data);
            const allUserList = allData[0].data.first_name;
            console.log(allUserList);
            const allAirlineData = allData[1].data.last_name;
            // const allBatch = allData[2].data.id;
    
            setNanOne(allUserList);
            setNanTwo(allAirlineData);
            // setBatch(allBatch);
          })
        );
      };
    
    
      useEffect(() => {
        fetchData();
      }, []);
    
      return (
    
      <div >
              <div
                
                style={{ marginRight: "85px", height: "80%" }}
              >
                <div Container="container-fluid" >
    
                  <div  style={{ textAlign: "Left" }}>
                    <div >
                      <h5 >Special title treatment</h5>
                      <p >
                        <Badge
                          bg="info"
                          style={{
                            position: "absolute",
                            right: "20px",
                            top: "15px",
                          }}
                        >
                          {/* {batch} */}
                        </Badge>
                       {nanOne} --------> This is not working since I need to map it
                       {nanTwo}
                      </p>
    
                      {/* <a href="#" >Go somewhere</a> */}
                    </div>
                  </div>
                </div>
              </div>
            </div>

Data Format:

data 
(2) [{…}, {…}]
0:
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
data:
data: {id: 2, email: '[email protected]', first_name: 'Janet', last_name: 'Weaver', avatar: 'https://reqres.in/img/faces/2-image.jpg'}
support: {url: 'https://reqres.in/#support-heading', text: 'To keep ReqRes free, contributions towards server costs are appreciated!'}

CodePudding user response：

There is minor code issue in axios.all function. Let me share the code here. Just replace this function in your code. It should work fine.

 const fetchData = () => {
      const UserAPI = "https://reqres.in/api/users/2";
      const AirlineAPI = "https://reqres.in/api/users/2";
  
      const getUserData = axios.get(UserAPI);
      const AirlineData = axios.get(AirlineAPI);
  
      axios.all([getUserData, AirlineData]).then(
        axios.spread((res1, res2) => {
          console.log("data", res1, res2);
          const allUserList = res1.data?.data?.first_name;
          console.log(allUserList);
          const allAirlineData = res2.data?.data?.last_name;
          // const allBatch = allData[2].data.id;
  
          setNanOne(allUserList);
          setNanTwo(allAirlineData);
        })
      );
    };