React-bootstrap-table2: Two columns have same dataField will cause the same key warning of React

[cbfrank]

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

[feather-jmalone]

+1, share your frustration.

[hungdev]

+1
i get the same warning.

[AllenFang]

hello, the dataField will be the unique key when rendering column. I will find if there's any alternative solution to avoid rendering key via dataField.

Currently, the workaround is i will suggest you flat your data firstly. thanks

[YassienW]

@AllenFang Maybe we could add a unique id to the dataField key or remove it and use a unique id like https://www.npmjs.com/package/shortid

[yipivan]

faced the same problem here +1
more to mention, even the datafields are different, however if the data referenced by the datafield are of same value (e.g. sometimes updated_at and created_at are the same), react will complain about duplicate keys as well.

[AllenFang]

I will consider to fix this issue. Don't worry guys.. Currently, the workaround is you just map your data to different dataField name.

[becarchal]

Encountered the same problem！Hi，AllenFang！When I modified key={ column.dataField } to key={ i } in HeaderCell 、FooterCell tags, the waring was fixed。Can we repair it in this way?

[stilllife00]

@AllenFang I am confused on how to apply the workaround

~in case of multiple array fields.
They both end up with key=[object Object] and so the warning. Renaming the dataField does not have impact on the key value if the cell content is an array.~

EDIT:
in case of dynamic columns computed in the render function depending on some props, the keys of the cells ends up having the same -index and hence the warning.
Note that I am talking about the Cell key in the Body (the Header is fine)
Maybe we should get the ability to specify a custom key different from the dataField for these cases.

Also the key looks like to be calculated on the original value rather than the output of the formatter which is probably more useful for objects and arrays?

[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) => {

      }
}

[kozlikov]

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) => {

      }
}

what if if we add sorting and add attribute remote = true in table ?

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

      }
}

then the request will go with sortField=dummy_id, what NOT sortField=id!
How to be in this case?

@AllenFang , mmm?

[Kartstig]

:+1: on a custom key prefix or key setter callback

I tried the workaround but am not able to get rid of the warning. This is splitting up Google Addresses into multiple City / State columns:

Instead I just had to map across the data and split the columns before handing them to the table

[MahmudulHassan5809]

I also face the same problem is there any solution ??

[smpengdev]

Has a solution been found yet? Unfortunately, marking isDummyField true does not resolve the issue. Thank you for all of your help!

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