React warning key prop

[reramjiawan]

React throws a warning when using the Column component.

Example code:

import React from 'react';
import BaseTable, { Column } from 'react-base-table';
import 'react-base-table/styles.css';

const generateColumns = (count = 10, prefix = 'column-', props) =>
  new Array(count).fill(0).map((column, columnIndex) => ({
    ...props,
    key: `${prefix}${columnIndex}`,
    dataKey: `${prefix}${columnIndex}`,
    title: `Column ${columnIndex}`,
    width: 150,
  }));

const generateData = (columns, count = 200, prefix = 'row-') =>
  new Array(count).fill(0).map((row, rowIndex) => {
    return columns.reduce(
      (rowData, column, columnIndex) => {
        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`;
        return rowData;
      },
      {
        id: `${prefix}${rowIndex}`,
        parentId: null,
      },
    );
  });

function App() {
  const columns = generateColumns(10);
  const data = generateData(columns, 200);

  console.log(columns, data);

  return (
    <BaseTable data={data} width={600} height={400}>
      {columns.map(column => (
        <Column {...column} key={column.key} />
      ))}
    </BaseTable>
  );
}

export default App;