how can i map over 2 Array of object in React and render to one Table. what are option for this issue. should i merge these two array into one ? Please check Json Data
let URL1 = "http://api_url/users"
let URL2 = "http://api_url/users-card"
const promise1 = axios.post(URL1, inputValue , {headers: {'Content-Type': 'text/plain'}});
const promise2 = axios.post(URL2, inputValue , {headers: {'Content-Type': 'text/plain'}});
Promise.all([promise1, promise2]).then(function(values) {
setDataSetOne(values[0]);
setDataSetTwo(values[1]);
});
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableCell>DataOne</TableCell>
<TableCell>DataOne</TableCell>
<TableCell>DataTwo</TableCell>
</TableBody>
</Table>
</TableContainer>
Json Data 1st
[{
"name": "adnan hassan",
"count": 6960
}, {
"name": "adnan",
"count": 69666660
}]
2nd Json Data
[{
"keyword_idea_metrics": {
"competition": "LOW",
"avg_monthly_searches": "6600",
"competition_index": "22",
"low_top_of_page_bid_micros": "53135896",
"high_top_of_page_bid_micros": "278963954"
},
"keyword_annotations": {
"concepts": []
},
"text": "dubai homes",
"_text": "text"
}]
Edit: Json Data has been added
You can use one object to contain two states like this:
import { useEffect, useState } from 'react';
import axios from 'axios';
const App = () => {
// use one object to contain two states
const [data, setData] = useState({ dataOne: '', dataTow: '' });
// fetch data
useEffect(() => {
const fetchData = async () => {
const dataOne = await axios.post(URL1, inputValue, {
headers: { 'Content-Type': 'text/plain' },
});
const dataTow = await axios.post(URL2, inputValue, {
headers: { 'Content-Type': 'text/plain' },
});
setData({ dataOne, dataTow });
};
fetchData();
}, []);
// display data
return (
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableCell>{data.dataOne}</TableCell>
<TableCell>{data.dataTow}</TableCell>
</TableBody>
</Table>
</TableContainer>
);
};
export default App;
I hope it helpful.