React table 7 gives issue for unique key

Question

I am using React Table 7 to build my tables, and the tables render but I'm getting a warning Each child in a list should have a unique "key" prop. I have included keys in all of the map function and the rows but am still getting the warning.

Each child in a list should have a unique "key" prop.

Table codes start from here.

return(
                <div className="mf-appointments-table">
                    <div className="horizontalScrollBar">
                        <table {...getTableProps()} className="rt-table">
                            <thead className="rt-thead -header">
                                {headerGroups.map((headerGroup, index) => (
                                    <tr
                                        key={index}
                                        className="rt-tr"
                                        {...headerGroup.getHeaderGroupProps()}
                                    >
                                        {headerGroup.headers.map((column, i) => (
                                            <th
                                                key={i}
                                                {...column.getHeaderProps({
                                                    style: {
                                                        minWidth: column.minWidth,
                                                        width: column.width,
                                                    },
                                                    className:
                                                        column.parent !== undefined
                                                            ? `rt-th -header ${column.headerClassName}`
                                                            : column.id === 'select'
                                                            ? column.headerClassName
                                                            : `-headerGroups ${column.headerClassName}`,
                                                })}
                                                {...column.getHeaderProps()}
                                            >
                                                {column.render('Header')}
                                                {column.headerClassName &&
                                                column.headerClassName !== 'undefined' &&
                                                column.headerClassName.includes('borderBottom') &&
                                                column.className !== 'expander-cell' ? (
                                                    <span
                                                        {...column.getResizerProps()}
                                                        className={`resizer ${
                                                            column.isResizing ? 'isResizing' : null
                                                        }`}
                                                    >
                                                        {' '}
                                                        .
                                                    </span>
                                                ) : null}
                                            </th>
                                        ))}
                                    </tr>
                                ))}
                            </thead>
                            <tbody className="rt-tbody" {...getTableBodyProps()}>
                                {rows.length > 0 &&
                                    rows.map((row, index) => {
                                        prepareRow(row);
                                        return (
                                            <>
                                                <tr
                                                    key={index}
                                                    id={index}
                                                    className="rt-tr"
                                                    {...row.getRowProps()}
                                                >
                                                    {row.cells.map((cell, i) => {
                                                        return (
                                                            <td
                                                                key={i}
                                                                onClick={() => getTdProps(cell)}
                                                                {...cell.getCellProps({
                                                                    className: `rt-td 
                                                       ${cell.column.className}`,
                                                                })}
                                                                {...cell.getCellProps()}
                                                            >
                                                                {cell.render('Cell')}
                                                            </td>
                                                        );
                                                    })}
                                                </tr>
    
                                                {row.isExpanded && (
                                                    <tr
                                                        key={index}
                                                        id={index}
                                                        className="rt-tr expandedSubRow"
                                                        {...row.getRowProps()}
                                                    >
                                                        {row.cells.map((cell, i) => {
                                                            return (
                                                                <td
                                                                    key={i}
                                                                    className="rt-td"
                                                                    {...cell.getCellProps()}
                                                                >
                                                                    {SubComponent({
                                                                        row,
    
                                                                        cell,
                                                                    })}
                                                                </td>
                                                            );
                                                        })}
                                                    </tr>
                                                )}
                                            </>
                                        );
                                    })}
                            </tbody>
                        </table>
    
                        <div className="loader">
                            <ClipLoader color="grey" loading={loading} size={150} />
                        </div>
    
                        {rows.length === 0 && !loading ? (
                            <div className="empty-table">{tableText}</div>
                        ) : null}
                    </div>
    
                    {totalPages > 1 ? reactTablePagination() : null}
                </div>
    )

Answer 1

Even though key attribute is added on every item they are not unique in the above code. The index is been assigned to the key but that index can be duplicate in many cases inside the loop.

Key property plays a very important role while rendering. Wrong usage of key property can lead to performance issue.

The right usage of key should follow the following conditions,

Unique - A key cannot be identical to that of a sibling component. Static - A key should not ever change between renders.

In the above code, the key will not be unique as the same index value is looping through in multiple places.

The best way of using the key property,

<tbody>
    {rows.map((row) => {
        return <tr key={row.uniqueId} />;
    })}
</tbody>

to have a unique id for each row and assign to the elements.

For reference