Estoy trabajando en una aplicación de reacción donde estoy representando componentes dentro de los campos de fila de la tabla. Aquí está la estructura de mi tabla:

 render() { console.log(this.codeDataGetter); const widthOfEachGrid = this.props.width / 16; const columns = ( [<Column key={1} label='SR.No' width={widthOfEachGrid * 2} cellDataGetter={this.srNoDataGetter} />, <Column key={2} label='Entity Name' dataKey='entity_name' width={widthOfEachGrid * 2} cellDataGetter={defaultCellDataGetter} />, <Column key={3} label='Code' dataKey='code' width={widthOfEachGrid * 1} cellDataGetter={this.codeDataGetter} />, <Column key={4} label='Code Description' dataKey='code_description' width={widthOfEachGrid * 2} cellDataGetter={this.codeDescriptionDataGetter} />, ] ); return ( <StyledTable height={this.props.height} width={this.props.width} headerHeight={headerHeight} rowHeight={rowHeight} rowRenderer={this.rowRenderer} rowCount={this.props.codeSets.length} rowGetter={({ index }) => this.props.codeSets[index]} LoadingRow={this.props.LoadingRow} overscanRowCount={5} tabIndex={-1} className='ui very basic small single line striped table' columnsList={columns} /> ); }

}

Ahora, en cada una de las columnas en la lista de columnas, he definido un cellRenderer diferente y el CellRenderer que devuelve String están funcionando, pero cuando devuelvo un componente, muestra esto:

[Object Object]

en lugar de un componente.

Aquí están mis renderizadores de celdas:

 srNoDataGetter = ({ dataKey, rowData, }) => ( this.props.codeSets.findIndex(codeSet => codeSet.id === rowData.id) + 1 ) codeDescriptionDataGetter = ({ dataKey, rowData, }) => { let dataToReturn = ''; if (rowData) { if (typeof rowData.get === 'function') { dataToReturn = rowData.get(dataKey); } dataToReturn = rowData[dataKey]; } else dataToReturn = ''; return ( <div> <Input type='text' className='form-control' value={dataToReturn} placeholder={translateText('Code Description')} onChange={() => this.handleCodeDescriptionChange(event, index)} style={{ height: '70%' }} /> </div> ); }

El srNoDataGetter funciona bien ya que devuelve una cadena y se representa perfectamente en la tabla, pero codeDescriptionDataGetter en lugar de representar un campo de entrada simplemente imprime [Object Object] .

¿Alguna pista sobre esto?