Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Encountered two children with the same key, `NaN` - Data Tables

datashield free asked 5 years ago


When inserting custom data into the Data Table element I am getting the following error: Encountered two children with the same key, NaN. 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'

This only occurs when the second page is generated. Below is the data I am using to generate the table. Having 10 items on the first page only does not show the error, but as soon as I add in enough items to generate another page, the error occurs. As far as I can tell, I am formatting the data correctly as the error doesn't occur without the second page.

Any help?

const tableData = {
  columns: [
{
  label: 'Time Added',
  field: 'timeAdded',
  sort: 'asc',
  width: 270,
},
{
  label: 'Completed',
  field: 'completed',
  sort: 'asc',
  width: 100,
},
{
  label: 'Results',
  field: 'results',
  sort: 'asc',
  width: 50,
},

  ],
  rows: [
{
  timeAdded: '2019-01-27T12:25:57-07:00',
  completed: '23',
  results: '4',
},
{
  timeAdded: '2019-01-27T12:25:57-07:00',
  completed: '23',
  results: '4',
},
{
  timeAdded: '2019-01-27T12:25:57-07:00',
  completed: '23',
  results: '4',
},
{
  timeAdded: '2019-01-27T12:25:57-07:00',
  completed: '23',
  results: '4',
},
{
  timeAdded: '2019-01-27T12:25:57-07:00',
  completed: '23',
  results: '4',
},
{
  timeAdded: '2019-01-27T12:25:57-07:00',
  completed: '23',
  results: '4',
},
{
  timeAdded: '2019-01-27T12:25:57-07:00',
  completed: '23',
  results: '4',
},
{
  timeAdded: '2019-01-27T12:25:57-07:00',
  completed: '23',
  results: '4',
},
{
  timeAdded: '2019-01-27T12:25:57-07:00',
  completed: '23',
  results: '4',
},
{
  timeAdded: '2019-01-27T12:25:57-07:00',
  completed: '23',
  results: '4',
},{
  timeAdded: '2019-01-27T12:25:57-07:00',
  completed: '23',
  results: '4',
},
  ],
};

Jakub Mandra staff answered 5 years ago


Hi there,

Thanks for report, I've found that there is a bug in implementation of Pagination for Datatable. It uses property name to set key of the Pagination Item, so if you do not have field named name in your data object the component will return error.

Sorry for the inconvenient, it will be repaired and released in next Monday.

Best,

Jakub


Amrit Anand free commented 4 years ago

still getting this problem


Piotr Glejzer staff commented 4 years ago

Thanks for refresh the problem. I didn't see task about that problem for 1 year.. I added this problem to our list to do to fix it.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: Laptop
  • Browser: Google Chrome 71.0.3578.98
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No