'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 |
---|