Two columns have same dataField will cause the same key warning of React

In some case, we need to add two columns which bound to same dataField, but show different test, for example, a filed of Date will be shown in two columns, one will show and edit for day part, and the other will show and edit for time part. in this case, we will get the below warning:

Warning: Encountered two children with the same key, time. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and

could change in a future version. in tr (created by Header) in thead (created by Header) in Header (created by BootstrapTable) in table (created by BootstrapTable) in div (created by BootstrapTable) in BootstrapTable (created by Context.Consumer) in SelectionProvider (created by Context.Consumer) in SortProvider (created by Context.Consumer) in CellEditProvider (created by Context.Consumer) in DataProvider (created by Table) in Table (created by Table) in Table (created by AppDefaultTable) in div (created by AppDefaultTable) in AppDefaultTable (created by Table) in Table (created by TableWithToolbar) in TableWithToolbar (created by Page) in div (created by Row) in div (created by Row) in div (created by Row) in article (created by Row) in div (created by Row) in Row (created by Page) in section (created by PageLayout) in PageLayout (created by Page) in Page (created by Connect(Page)) in Connect(Page) (created by Route) in Route (created by App) in Switch (created by App) in Router (created by BrowserRouter) in BrowserRouter (created by App) in Provider (created by App) in App

[hkar19]

in my use case, instead of relying on datafield, i just use the row value instead.

so on colum descriptions instead of:

let colums = [
.
.
.
  {datafield: 'address', text: 'City' , formatter: cityFormatter},
  {datafield: 'address', text: 'Province' , formatter: cityFormatter},
  {datafield: 'address', text: 'Country' , formatter: cityFormatter},
.
.
.
]

i do:

let colums = [
.
.
.
  {datafield: 'city', text: 'City' , formatter: cityFormatter},
  {datafield: 'province', text: 'Province' , formatter: cityFormatter},
  {datafield: 'country', text: 'Country' , formatter: cityFormatter},
.
.
.
]

in the formatter, the cell will be undefined, but you can retrieve the data by using row such as:

const cityFormatter = (cell, row)=>{
   let val = row.address;
  // rest of your code
}

[JeffreyCA]

A workaround is to declare one of the columns to be a dummy field and provide it a custom formatter:

{
      dataField: 'dummy_field',
      isDummyField: true,
      text: '',
      formatter: (cellContent, row) => {

      }
}