'react-bootstrap-table warning each child in a list should have a unique "key" prop

I'm building an app and while the code works, I'm trying to eliminate a persistent warning message with little success. I consistently get:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of Body. in SimpleRow (created by Body) in Body (created by BootstrapTable) in table (created by BootstrapTable) in div (created by BootstrapTable) in BootstrapTable (created by Context.Consumer) in ColumnManagementProvider (created by Context.Consumer) in DataProvider (created by BootstrapTableContainer) in BootstrapTableContainer (at DriverList.js:158) in div (at DriverList.js:156) in DriverList (created by Connect(DriverList))

Here is the code for the table that is generating the error:

const columns = [
        {
            dataField: 'id',
            text: 'uuid',
            headerStyle: {backgroundColor: GLOBAL_STYLES.CONSTANTS.gray},
            hidden: true,
        },
        {
            dataField: 'driverName',
            text: 'Driver Name',
            headerStyle: {backgroundColor: GLOBAL_STYLES.CONSTANTS.gray},
        },
        {
            dataField: 'dockCode',
            text: 'Dock Code',
            headerStyle: {backgroundColor: GLOBAL_STYLES.CONSTANTS.gray},
        },
        {
            dataField: 'scacCode',
            text: 'SCAC Code',
            headerStyle: {backgroundColor: GLOBAL_STYLES.CONSTANTS.gray},
        },
        {
            dataField: 'epochIn',
            text: 'Check In Time',
            headerStyle: {backgroundColor: GLOBAL_STYLES.CONSTANTS.gray},
            formatter: (cell,row,rowIndex,formatExtraData) =>{
                var localDateTime = new Date(cell*1000);
                return (localDateTime.toString());
            }
        },
        {
            dataField: 'trips',
            text: 'Trips Assigned?',
            headerStyle: {backgroundColor: GLOBAL_STYLES.CONSTANTS.gray},
            formatter: (cell,row,rowIndex,formatExtraData) => {
                if (cell !== '' && cell != null)
                    return ('Yes')
                else
                    return ('No')
            },
            style: (cell,row,rowIndex,colIndex) => {
                if (rowIndex === mousedRow)
                   return {backgroundColor: GLOBAL_STYLES.CONSTANTS.orange};
                else if (cell !== '' && cell != null)
                   return {backgroundColor: GLOBAL_STYLES.CONSTANTS.success};
                else
                   return {backgroundColor: GLOBAL_STYLES.CONSTANTS.danger};
            } 
        }
    ];

    const rowEvents = {
        onClick: (e, row, rowIndex) => {
            selectDriver(row);
        },
        onMouseEnter: (e, row, rowIndex) => {
            setMousedRow(rowIndex);
        },
        onMouseLeave: (e, row, rowIndex) => {
            if (mousedRow === rowIndex)
                setMousedRow(-1);
        }
    };

    const rowStyle = (row,rowIndex) => {
        const style = {};
        if (rowIndex === mousedRow)
            style.backgroundColor = GLOBAL_STYLES.CONSTANTS.orange;
        else if (rowIndex % 2 == 0)
            style.backgroundColor = GLOBAL_STYLES.CONSTANTS.white;
        else
            style.backgroundColor = GLOBAL_STYLES.CONSTANTS.gray;

        return style;
    }

    if (recordsDirty){
        updateLoadingMessage('Fetching Records');
        fetchRecords();
        touchRecords(false);
    }
    
    return(
        <div>
            {loadingMessage != null ? <LoadingOverlay message={loadingMessage}/> : null}
            <BootstrapTable 
                keyField='id'
                data= { records } 
                columns={ columns } 
                rowStyle={ rowStyle }
                rowEvents={ rowEvents}
            />
        </div>
    );
};

export default connect(mapStateToProps,mapDispatchToProps)(DriverList);

Any help understanding why the unique key specified in keyfield isn't getting rid of the warning would be appreciated.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source