Tengo una pregunta bastante simple, pero no pude resolverla todavía. El primer código funciona, mientras que el segundo solo me da celdas de tabla vacías. ¿Cuál es el motivo de eso y cómo puedo poner datos en la tabla sin asignarlos a nada?
const prods = [ {id: 1, name: 'product1', cost: 100}, {id: 2, name: 'product2', cost: 200}, {id: 3, name: 'product3', cost: 300}, ]; function App() { const rows = prods.map(function(item) { return <tr key={item.id}> <td>{item.name}</td> <td>{item.cost}</td> </tr>; }); return <table> <tbody> {rows} </tbody> </table>; } const prods = [ {id: 1, name: 'product1', cost: 100}, {id: 2, name: 'product2', cost: 200}, {id: 3, name: 'product3', cost: 300}, ]; function App() { return <table> <tbody> <tr key={prods.id}> <td>{prods.name}</td> <td>{prods.cost}</td> </tr>; </tbody> </table>; }Verá una fila vacía que puede ser invisible. Pero puede verificarlo en la herramienta de desarrollo del navegador.
¿Por qué? Es simple. No has impreso nada.
prods es una matriz. Pero en su método de renderizado ( return <table> ... ), imprimió prods.name que no está undefined .
Así que cambie para ver una fila.
<td>prods[0].name</td> ...El correcto es el siguiente:
function App() { return <table> <tbody> {prods.map(prod) => <tr key={prod.id}> <td>{prod.name}</td> <td>{prod.cost}</td> </tr>} </tbody> </table>; }está intentando acceder a un valor de propiedad de un objeto dentro de una matriz de objetos sin iterar sus elementos, lo que resultará indefinido. En su caso, necesita mapear su conjunto de objetos usando el método Map , consulte esta URL para que pueda obtener más información sobre cómo representar múltiples componentes usando el método map en React.