0
203
VisualizaçõesLlenar 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 Respostas
Responde à pergunta0
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
Relatório
Responde à pergunta