0
202
ViewsLlenar datos en una tabla en React
Tengo algunos datos anidados y quiero llenarlos en una tabla en reacción. Como se muestra en la imagen, todos los métodos están en una fila. ¿Cómo puedo hacer una fila para cada método con su nombre de página correspondiente? 
const methods = [{ id: "1", name: 'First', pagesName: [{ name: 'Login', message: 'Login Notification Message', messageType: 'Warning' }, { name: 'Edit', message:'Edit Notification Message', messageType: 'Info' }] }, { id: "2", name: 'Second', pagesName: [{ name: 'Admin', message: 'Admin Notification Message', messageType: 'Info' }, { name: 'Edit', message: 'Edit Notification Message', messageType: 'Warning' } ]} ]Mesa
<tbody> {methods.map((p, key) => { return ( <tr> <td>{key}</td> <td>{p.name}</td> {p.pagesName.map((n, key) => { return ( <> <td>{n.name}</td> <td>{n.message}</td> <td>{n.messageType}</td> </> ) })} </tr> )}) } </tbody>
·
Juan Pablo Isaza
1 answers
Answer question0
Use Array.map() así: https://jsfiddle.net/Lc3m08dn/58/
<table> <thead> <tr> <th>ID</th> <th>Name</th> <th>PagesName</th> <th>Message</th> <th>messageType</th> </tr> </thead> {methods.map(method => ( <tbody> <tr> <td rowspan={method.pagesName.length + 1}>{method.id}</td> <td rowspan={method.pagesName.length + 1}>{method.name}</td> </tr> {method.pagesName.map(page => ( <tr> <td>{page.name}</td> <td>{page.message}</td> <td>{page.messageType}</td> </tr> ))} </tbody> ))} </table>
·
Juan Pablo Isaza
Report
Answer question