React - Multiple HTTP API call using Axios.all &&& Promise.all - fill in ag-grid-react

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

import Axios from "axios";

import { AgGridReact } from "ag-grid-react";

import "ag-grid-community/dist/styles/ag-grid.css";

import "ag-grid-community/dist/styles/ag-theme-alpine.css";

import "./styles.css";

//import 'prop-types' from 'props-types';

export default function App() {

//-------------------------------------------------------------------------

//Type-1 static column data to render ag-React grid table

const [staticColumnDefs] = useState([

{ field: "make" },

{ field: "model" },

{ field: "price" }

]);

const [staticRowData] = useState([

{ make: "Toyota", model: "Celica", price: 35000 },

{ make: "Ford", model: "Mondeo", price: 32000 },

{ make: "Porsche", model: "Boxter", price: 72000 }

]);

//-------------------------------------------------------------------------

const userApi = "https://jsonplaceholder.typicode.com/users";

const postApi = "https://jsonplaceholder.typicode.com/posts";

//-------------------------------------------------------------------------

const axiosColumnDefss = [

{ headerName: "User Name", field: "post.username" },

{ headerName: "Title", field: "title" },

{ headerName: "Post", field: "body" }

];

const [axiosRowsData, setAxiosRowsData] = useState([]);

const [users, setUsers] = useState();

const [posts, setPosts] = useState();

const getUserPost = () => {

Axios.all([Axios.get(userApi), Axios.get(postApi)])

.then(

Axios.spread((...responses) => {

setUsers(responses[0].data);

setPosts(responses[1].data);

//console.log(users, posts);

// To use const or let varabile to do operations

responses[1].data.map(function (item1) {

responses[0].data.map(function (item2) {

if (item1.userId === item2.id) {

item1.post = item2;

}

});

});

//mystery here is post, user are not reassigning with consoel gives

//console.log("Result=>" + responses[1].data, users, posts);

setAxiosRowsData(responses[1].data);

})

)

.catch((errors) => {

// react on errors.

console.log(errors);

});

};

//---------------------------------------------------------------------------

const [promiseRowsData, setPromiseRowsData] = useState([]);

const promiseColumnDefss = [

{ headerName: "User Name", field: "post.username" },

{ headerName: "Title", field: "title" },

{ headerName: "Post", field: "body" }

];

const PromiseAll = async () => {

try {

const res = await Promise.all([Axios.get(userApi), Axios.get(postApi)]);

const data = res.map((res) => res.data);

//console.log(data[0], data[1], data, data.flat());

data[1].map(function (item1) {

data[0].map(function (item2) {

if (item1.userId === item2.id) {

item1.post = item2;

}

});

});

//console.log("Result=>" + data[1]);

setPromiseRowsData(data[1]);

} catch {

throw Error("Promise failed");

}

};

useEffect(() => {

getUserPost();

PromiseAll();

}, []);

return (

<>

<h5> Static Table Data</h5>

<div className="App ag-theme-alpine" style={{ height: 200, width: 600 }}>

username | post | title

<AgGridReact columnDefs={staticColumnDefs} rowData={staticRowData} />;

</div>

<br />

<h5> Axios.all ( multi http call) Table Data</h5>

<div className="App ag-theme-alpine" style={{ height: 400, width: 600 }}>

username | post | title

<AgGridReact columnDefs={axiosColumnDefss} rowData={axiosRowsData} />;

</div>

<br />

<h5> Promise.all ( multi http call) asyn await.then() -Table Data</h5>

<div className="App ag-theme-alpine" style={{ height: 400, width: 600 }}>

username | post | title

<AgGridReact

columnDefs={promiseColumnDefss}

rowData={promiseRowsData}

/>

;

</div>

</>

);

}