Estoy trabajando en una tarea en la que necesito pasar los datos a la tabla. La tabla tiene su propio tipo de datos y propiedad. Necesito seguir lo mismo cuando aplico la lógica. Ahora estoy tratando de pasar los datos dinámicamente. Pero cuando trato de pasar los datos dinámicamente, no obtengo los valores en el cuerpo de la tabla. Cualquiera puede guiarme sobre cómo completar los datos dinámicamente. Necesito seguir el siguiente formato cuando estoy trabajando con el componente de tabla
**Table Props:** 1. Table PROPS- Prop: Children Type: Node default:[] (Desc: the child content for table consisting of eithera Table Header or Body) 2. Table Header Props- Prop: Children Type: node default:[] 3. Table Header Cell props - prop:children type:node default:[](Desc: content to display for column header) 4. Table Row Props - Prop: Children Type: node default:[] (Desc: child table cells to be placed within the tr) 5. Table Cell Props - Prop: Children Type: node default:[] (Desc: content to be displayed for row cell)Mi código
<Table paddingStyle="compact"> <Header> <HeaderCell key="Name">Name</HeaderCell> <HeaderCell key="ID">ID</HeaderCell> <HeaderCell key="Group">Group</HeaderCell> </Header> <Body> {mockData.forEach((element) => { element.cells.forEach(cell => { return ( <Row key={element.key}> <Cell>{cell.Name}</Cell> // In console I ma getting undefined <Cell>{cell.ID}</Cell> // In console I ma getting undefined <Cell><Batch {cell.Group}/></Cell> // In console I ma getting undefined //Batch component will be imported </Row> ) }) }) }Datos JSON
[ { "key":"k-01", "cells":[ { key: '0', Name: 'ABC' }, { key: '1', ID: '123' }, { key: '2', Group: ['1', '2'] }, ]]
Formato de componente de tabla
<Table> <Header> <HeaderCell key="NAME">Name</HeaderCell> <HeaderCell key="ID">ID</HeaderCell> <HeaderCell key="Group">Group</HeaderCell> </Header> <Body> <Row key="0"> <Cell key="NAME">ABC</Cell> <Cell key="ID">1</Cell> <Cell key="Group">I, O</Cell> // in the form of label or React-bootstarp badge(Example) </Row> </Body> </Table>usar el map sería una mejor opción aquí, no está definido debido a la forma en que forEach() devuelve el valor
Al igual que map , el método forEach() recibe una función como argumento y la ejecuta una vez para cada elemento de la matriz. Sin embargo, en lugar de devolver una nueva matriz como map, devuelve undefined . como se puede ver en la respuesta a continuación
código:
const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x) //>>>>>>>>>>>>>return value: undefined