¿Cómo puedo representar dos respuestas api dataOne y dataTwo en el cuerpo de la tabla con el mapa? Como dataOne en las dos primeras celdas de tabla y datos dos en la tercera celda de tabla
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>Suponiendo que está utilizando efectos y estado para dataOne y dataTwo , primero, declare la función de procesamiento de celdas de tabla:
const renderCell = (content, index) => <TableCell key={index}>{content}</TableCell>;Y luego use el mapa en la función de representación del componente:
<TableBody> {dataOne.map(renderCell)} {dataTwo.map(renderCell)} </TableBody> Idealmente, debe reemplazar el índice con la identificación de la fila. Sin la key , React se quejaría de que no puede rastrear el estado del componente. Más información sobre claves y listas: https://reactjs.org/docs/lists-and-keys.html