Mantine react table Encountered two children with the same key error

Question

I'm trying to find a solution to fix this error that occurs when using mantine react table. I get the same errors when trying to run test cases in jest.

Warning: Encountered two children with the same key, 0_attributes() => row.getValue(columnId). 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.

export const CreatorLookupsTable = ({
  isLoading,
  tableData,
  error,
  limit,
  addCreator,
}: Props) => {
  const data = tableData.data;

  const ErrorOrNoResult = () => {
    return limit
      ? ''
      : error
      ? 'Search results will be shown here.'
      : Object.keys(data).length === 0
      ? 'No creators found. Check username spelling and/or platform chosen.'
      : 'No creators found.';
  };

  const columns = [
    {
      accessorKey: 'attributes.method',
      header: 'Source',
      enableSorting: true,
      Cell: ({ cell, rowIndex }: any) => (
        <p
          key={`source-${cell.getValue()}-${rowIndex}`}
          style={{
            color: '#5E5ADB',
            margin: '0px',
            textTransform: 'capitalize',
          }}
        >
          {cell.getValue()}
        </p>
      ),
    },
    {
      accessorKey: 'attributes',
      header: 'Creators',
      enableSorting: true,
      Cell: ({ renderedCellValue, cell, rowIndex }: any) => (
        <Box
          key={`creators-${cell.getValue()}-${rowIndex}`}
          sx={{
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <Avatar
            src={renderedCellValue[renderedCellValue.method]?.logo}
            size={20}
            radius={100}
            sx={{
              marginRight: '5px',
            }}
          />
          <p>{renderedCellValue[renderedCellValue.method]?.displayName}</p>
        </Box>
      ),
    },
    {
      accessorKey: 'attributes',
      header: 'Reach',
      enableSorting: true,
      Cell: ({ renderedCellValue, cell, rowIndex }: any) => (
        <span
          key={`reach-${cell.getValue()}-${rowIndex}`}
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            width: '50px',
            backgroundColor: '#F4F4F5',
            borderRadius: '16px',
            padding: '2px 8px ',
            fontWeight: 400,
          }}
        >
          {formatLargeNumber(
            renderedCellValue[renderedCellValue.method]?.statistics.views
          )}
        </span>
      ),
    },
    {
      accessorKey: 'videos',
      header: 'Videos',
      enableSorting: true, // disable sorting for this column
      Cell: ({ cell, rowIndex }: any) => (
        <span
          key={`videos-${cell.getValue()}-${rowIndex}`}
          style={{
            color: '#3538CD',
            display: 'flex',
            justifyContent: 'center',
            width: '50px',
            alignItems: 'center',
            padding: '2px 8px ',
            backgroundColor: '#EEF4FF',
            borderRadius: '16px',
            fontWeight: 400,
          }}
        >
          {formatLargeNumber(cell.getValue() as number)}
        </span>
      ),
    },
    {
      id: 'button',
      header: '',
      enableSorting: false,
      Cell: ({ cell, rowIndex }: any) => (
        <Button
          key={`add-${cell.getValue()}-${rowIndex}`}
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '40px',
            height: '16px',
            backgroundColor: '#6FCF97',
            fontSize: '8px',
            textTransform: 'uppercase',
            fontFamily: 'Alegreya Sans',
            fontWeight: 700,
          }}
          // onClick={() => addCreator()}
        >
          add
        </Button>
      ),
    },
  ];

  const table = useMantineReactTable({
    columns,
    data,
    enableSorting: true,
    enableColumnActions: false,
    enableColumnFilters: false,
    enablePagination: false,
    enableFullScreenToggle: false,
    enableDensityToggle: false,
    enableHiding: false,
    enableGlobalFilter: false,
    state: {
      isLoading: isLoading,
    },
    mantinePaperProps: {
      sx: (theme) => ({
        border: '0px solid !important',
      }),
    },
    mantineTableHeadCellProps: {
      sx: {
        fontFamily: '__Alegreya_Sans_d501ea',
        fontSize: '14px',
        fontStyle: 'normal',
        fontWeight: 400,
        lineHeight: '20px',
        textTransform: 'uppercase',
        padding: '0px 10px !important',
      },
    },
    mantineTableBodyCellProps: {
      sx: {
        padding: '0px 10px !important',
        fontFamily: '__Alegreya_Sans_d501ea',
      },
    },
    localization: {
      noRecordsToDisplay: ErrorOrNoResult(),
    },
  });

  return (
    <div data-testid={'creator-table-test-id'}>
      <MantineReactTable table={table} />
    </div>
  );
};

I have tried to add the indexes into each columns like so key={add-${cell.getValue()}-${rowIndex}} and each column has it's own unique string value but i'm not sure if i implemented it correctly. please correct me if im wrong

Answer 1

It happens because you have defined multiple columns with the same accessorKey.

In MRT v6 you can resolve this issue by providing a unique id to the column definition, e.g.

{
  accessorKey: 'attributes'
  id: 'reach',
}, {
  accessorKey: 'attributes'
  id: 'creators', // tip: this line is actually unnecessary
}