使用 map() 和 JSX 渲染数据数组

Question

I am trying to render an array with jsx, this array has a span inside and when trying to render it the output is [object Object] I am trying to add a tooltip inside, can you help me understand why this is happening? I am using BootstrapTable with the react-bootstrap-table-plus library

my code:

<DataTableConfigurator
    data={
        this.props.configuracion.map(d => {
            var s = d.servicios[0].fechaultimaactualizacion;
            var ds = moment(s, 'DD - MM - YYYY HH:mm');
            var fecha = ds.format('DD/MM/YYYY');
            return {

                NOMBRE: <a key={d.ID_TIPO_CONF} data-toggle="tooltip" title={["Última fecha actualización :" + fecha]}>{d.nombredivision} </a>,
                ID_TIPO_CONF: d.iD_TIPO_CONFIGURACION == 1 ? 'Manual' : 'Automática',


            }
        }
    }
>

properties of my DataTableConfigurator:

class DataTableProperties extends PureComponent {

    constructor(props) {
        super(props);

        this.state = {
            originalData: this.props.data,
            cloneData: [...this.props.data],
            searchFilterValue: '',
            noDataMessage: this.props.noDataMessage,
            page: 1,
            sizePerPage: this.props.sizePerPage || 5
        };
    }
   

    componentWillUpdate(prevProps) {
        if (prevProps.data.length != this.state.originalData.length) {
            this.cloneOriginalData(prevProps.data);
        } else {
            if (prevProps.data.length != 0) {
                var obj = [];
                for (var i = 0; i < prevProps.data.length; i++) {
                    var e = prevProps.data[i];
                    if (e[Object.keys(e)[0]] != this.state.originalData[i][Object.keys(e)[0]]) {
                        this.cloneOriginalData(prevProps.data);
                        break;
                    }
                }
                //if (obj.length != 0) {
                    
                //}
            }
        }
    }

    componentWillUnmount() {
        this.setState({
            originalData: [],
            cloneData: [],
            searchFilterValue: '',
            noDataMessage: '',
            page: 1
        });
    }

    cloneOriginalData = data => {
        var originalData = data;
        var cloneData = [...originalData];
        this.setState({ originalData, cloneData });
    }

    searchFilter = input => {
        var searchFilterValue = input.target.value;;
        var originalData = this.state.originalData;
        var cloneData = [];

        if (searchFilterValue != '') {
            for (var i = 0; i < originalData.length; i++) {
                var row = originalData[i];
                var keys = Object.keys(row);

                for (var j = 0; j < keys.length; j++) {
                    var cell = row[keys[j]];
                    if (typeof cell !== 'object') {
                        cell = String(cell).toLowerCase();
                        if (cell.indexOf(searchFilterValue.toLowerCase()) > -1) {
                            cloneData.push(row);
                            break;
                        }
                    }
                }
            }
        } else {
            cloneData = [...originalData];
        }

        this.setState({ cloneData, searchFilterValue, page: 1 });
    }

    render() {
        const customTotal = (from, to, size) => (
            <span className="react-bootstrap-table-pagination-total">
                Mostrando {from} a {to} de {size} Resultados &nbsp;
            </span>
        );
   
        const headercolor = { color: "#FFFF" };

        const options = {
            paginationSize: 3,
            pageStartIndex: 1,
            sizePerPage: 15,  // which size per page you want to locate as default
            prePage: 'Atrás', // Previous page button text
            nextPage: 'Siguiente', // Next page button text
            firstPage: 'Primero', // First page button text
            lastPage: 'Último', // Last page button text
            noDataText: (<div className="text-center">No se encontraron datos</div>),
            showTotal: true,
            paginationShowsTotal: customTotal,
            page: this.state.page,
            onPageChange: e => { this.setState({ page: e }); },
            disablePageTitle: true,
            sizePerPageList: [{
                text: this.state.sizePerPage, value: this.state.sizePerPage
            }, {
                text: this.state.sizePerPage * 2, value: this.state.sizePerPage * 2
            }, {
                text: 'Todos', value: this.state.cloneData.length
            }]
        };
        //function priceFormatter(cell, row) {
        //    return '<span></span>' + row;
        //}
        return (
            <div>
                <div className="row mb-3">
                    <div className="col-1 offset-9">
                        <label className="p-1">Buscar:</label>
                    </div>
                    <div className="col-2">
                        <input type="text" className="form-control form-control w-100" value={this.state.searchFilterValue} onChange={input => { this.searchFilter(input); }} />
                    </div>
                </div>
                <div className="row">
                    <div className="col-12">
                        <BootstrapTable striped hover condensed
                            key={`data_${new Date().getTime()}`}
                            headerStyle={{ background: '#df6727' }}
                            containerStyle={{ border: '#f0f0f0 1.5px solid' }}
                            data={this.state.cloneData}
                            bootstrap3={true}
                            noDataIndication={() => (<div className="text-center"> {this.state.noDataMessage == null ? 'No se encontraron resultados' : this.state.noDataMessage}</div>)}
                            pagination={true}
                            options={options}
                        >
                            <TableHeaderColumn width='200' dataField="NOMBRE"><div style={headercolor}>División</div></TableHeaderColumn>
                            <TableHeaderColumn width='150' dataField="ID_TIPO_CONF" isKey={true}><div style={headercolor}>Tipo Conf.</div></TableHeaderColumn>
                            <TableHeaderColumn width='150' dataField="NOMBRESERV01"><div style={headercolor}>Servicio 1</div></TableHeaderColumn>
                            <TableHeaderColumn width='150' dataField="NOMBRESERV02"><div style={headercolor}>Servicio 2</div></TableHeaderColumn>
                            <TableHeaderColumn width='200' dataField="NOMBRESERV03"><div style={headercolor}>Servicio 3</div></TableHeaderColumn>
                            <TableHeaderColumn width='150' dataField="NOMBRESERV04"><div style={headercolor}>Servicio 4</div></TableHeaderColumn>
                            <TableHeaderColumn width='150' dataField="NOMBRESERV05"><div style={headercolor}>Servicio 5</div></TableHeaderColumn>
                            <TableHeaderColumn width='150' dataField="NOMBRESERV06"><div style={headercolor}>Servicio 6</div></TableHeaderColumn>
                            <TableHeaderColumn width='150' dataField="NOMBRESERV07"><div style={headercolor}>Servicio 7</div></TableHeaderColumn>
                        </BootstrapTable>
                    </div>
                </div>
            </div>
        );
    }
}

export default DataTableProperties;

any solution?

Answer 1

The only way to get that is by printing an object inside a string field.

Example:

console.log(`${{}}`);
// [object Object]

console.log('' + {});
// [object Object]

console.log({});
// > {}

---

In <DataTableConfigurator /> you print <a...>{d.nombredivision}</a> , then appears the "Manual", so I guess here's the problem.

As you try something like <a>{{}}</a> which prints "[object Object]".

Which is strange because of React, it should throw Error: Objects are not valid as a React child . Plain HTML/JS let's you do that, the result is exactly what you already get.

Try debugging that d.nombredivision to see what it actually is.

Answer 2

My solution: in DataTableConfigurator create one function for each header or element:

1.- where row is your row in list original.

cellDivision(cell, row, enumObject, rowIndex) {
        return (
            <a data-toggle="tooltip" title={["Última fecha actualización :" + row.FECHA]}>
                {row.NOMBRE}
            </a>
        )
    }

2.- In header List add Dataformat:

<TableHeaderColumn width="130" dataField="NOMBRE" dataFormat={this.cellDivision.bind(this)}><div style={headercolor}>División</div></TableHeaderColumn>

Thanks!