Soy un principiante de React y tengo problemas para convertir un objeto en una tabla. Puedo acceder al objeto ctx con console.log pero no puedo mostrarlo en el navegador en la tabla. Si alguien me puede ayudar por favor deme su consejo. el código está abajo.
El objetivo es mostrar datos del objeto (ctx) en la tabla.
function AllData(){ const ctx = {users:[{name:'john', email:'john@email.com', passwords:'password'},{name:'smith', email:'smith@email.com', passwords:'password']}; const userdata = ctx.users.map((user)=>{ ( <tr> <td>{user.name}</td> <td>{user.email}</td> <td>{user.password}</td> </tr> ) }); return ( <table className="table"> <thead> <tr> <th scope="col">Name</th> <th scope="col">Email</th> <th scope="col">Password</th> </tr> </thead> <tbody> {userdata} </tbody> </table> ); }Necesitas devolver algo del .map como
const userdata = ctx.users.map((user) => { return ( <tr key={user.name}> <td>{user.name}</td> <td>{user.email}</td> <td>{user.password}</td> </tr> ) });O incluso simplemente
const userdata = ctx.users.map((user) => ( <tr key={user.name}> <td>{user.name}</td> <td>{user.email}</td> <td>{user.password}</td> </tr> ));Otra opción sería como
return ( <table className="table"> <thead> <tr> <th scope="col">Name</th> <th scope="col">Email</th> <th scope="col">Password</th> </tr> </thead> <tbody> { ctx.users.map((user) => ( <tr key={user.name}> <td>{user.name}</td> <td>{user.email}</td> <td>{user.password}</td> </tr> )) } </tbody> </table> ) También agregó la propiedad key , ya que está utilizando una matriz.
Agregar return dentro map
const userdata = ctx.users.map((user)=>{ return ( <tr> <td>{user.name}</td> <td>{user.email}</td> <td>{user.password}</td> </tr> ) });Hay un par de problemas con su código, el principal es que la función que usa en el .map no return nada.
Otros asuntos:
} en la definición de ctx .passwords vs password .key presente en los elementos JSX que devuelve la función de mapa.A continuación se muestra una muestra ejecutable con todos estos problemas solucionados.
function AllData() { const ctx = { users: [ { name: 'john', email: 'john@email.com', password: 'password' }, { name: 'smith', email: 'smith@email.com', password: 'password' } ] }; const userdata = ctx.users.map((user)=>{ return ( <tr key={user.name}> <td>{user.name}</td> <td>{user.email}</td> <td>{user.password}</td> </tr> ) }); return ( <table className="table"> <thead> <tr> <th scope="col">Name</th> <th scope="col">Email</th> <th scope="col">Password</th> </tr> </thead> <tbody> {userdata} </tbody> </table> ) } ReactDOM.render(<AllData />, document.getElementById('react')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="react"></div>