Estoy trabajando en un proyecto de reacción en el que estoy usando react-virtualized para representar una tabla con columnas y estoy usando un cellRenderer para representar datos en diferentes celdas, pero quiero un campo de entrada en una de las celdas, así que creé un cellRenderer personalizado para devuelve ese componente pero en la tabla se muestra como objeto.

Aquí está mi código:

 codeDataGetter = ({ dataKey, rowData, }) => { let dataToReturn = ''; if (rowData) { if (typeof rowData.get === 'function') { dataToReturn = rowData.get(dataKey); } dataToReturn = rowData[dataKey]; } else dataToReturn = ''; console.log('codeDataGetter', dataToReturn); return ( <Input type='text' className='form-control' value={dataToReturn} placeholder={translateText('Code')} onChange={() => this.handleCodeChange(event, index)} style={{ height: '70%' }} /> ); }

Mesa:

 <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} />

Columnas:

 const columns = ( [ <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} />, ] );

Object... se muestra en lugar del cuadro de Input Box . Cualquier ayuda será apreciada.