How can i render two api response dataOne & dataTwo in table body with map? Like dataOne in first two tablecell & data two in 3rd tablecell
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) {
setDataOne(values[0]);
setDataTwo(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>
Assuming that you're using effects and state for dataOne and dataTwo, first, declare table cell render function:
const renderCell = (content, index) => <TableCell key={index}>{content}</TableCell>;
And then use map in the component render function:
<TableBody>
{dataOne.map(renderCell)}
{dataTwo.map(renderCell)}
</TableBody>
Ideally, you should replace index with the row id. Without the key React would complain that it is unable to track component state.
More info about keys and lists: https://reactjs.org/docs/lists-and-keys.html