React Data Table Component - getting Warning: Each child in a list should have a unique "key" prop

Question

I'm using React Data Table Component, and applied filter exactly same as here:

() => {
    const [filterText, setFilterText] = React.useState('');
    const [resetPaginationToggle, setResetPaginationToggle] = React.useState(false);
    const filteredItems = fakeUsers.filter(
        item => item.name && item.name.toLowerCase().includes(filterText.toLowerCase()),
    );

    const subHeaderComponentMemo = React.useMemo(() => {
        const handleClear = () => {
            if (filterText) {
                setResetPaginationToggle(!resetPaginationToggle);
                setFilterText('');
            }
        };

        return (
            <FilterComponent onFilter={e => setFilterText(e.target.value)} onClear={handleClear} filterText={filterText} />
        );
    }, [filterText, resetPaginationToggle]);

    return (
        <DataTable
            title="Contact List"
            columns={columns}
            data={filteredItems}
            pagination
            paginationResetDefaultPage={resetPaginationToggle} // optionally, a hook to reset pagination to page 1
            subHeader
            subHeaderComponent={subHeaderComponentMemo}
            selectableRows
            persistTableHead
        />
    );
}

And now I'm getting error message as

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

Check the top-level render call using . It was passed a child from Sample. in FilterComponent (at --Sample.js:288)

I do have the id value in my data, and I also read the article this problem has solved from data-table-component but I'm still on getting this warning.

What do I have to prevent this message?
Is there alternate way to turn it off this message?

It's not clear from this post where the error is actually coming from. This error typically arrises when you apply a map function on a list which creates components, and those components don't have a unique key field. Off hand, I'd guess it's coming from your implementation of the `subHeaderComponent` — Jthorpe, Apr 04 '22 at 06:07
Specifically, `subHeaderComponentMemo` is likely used to map data to components, but you're not assigning a key to the returned component. — Jthorpe, Apr 04 '22 at 06:10

score 0 · Answer 1 · answered Apr 04 '22 at 06:10

try this,

    const filteredItems = fakeUsers.filter(
        item => item.name && item.name.toLowerCase().includes(filterText.toLowerCase()),
    );
    
     let records = filteredItems.map((d) => ({ ...d, key: d.ID }));

..............


return (
        <DataTable
            title="Contact List"
            columns={columns}
            data={records}
            pagination
            paginationResetDefaultPage={resetPaginationToggle} // optionally, a hook to reset pagination to page 1
            subHeader
            subHeaderComponent={subHeaderComponentMemo}
            selectableRows
            persistTableHead
        />

I also tried giving key to the data but didn't worked.. same warning message as before.. — Juhyun Park, Apr 04 '22 at 06:42

score 0 · Answer 2 · answered Apr 04 '22 at 10:35

I solved this problem, and now found out why I was the only one who faced this issue.

I was using another Memo for eanbling the control button. The warning message was came because, there are 2 'memo'es. So, I put diffrent key pros to each 'Memo'es as below

--

<FilterComponent key="func_filter" onFilter={e => setFilterText(e.target.value)} onClear={handleClear} filterText={filterText} />


const actionsMemo = useMemo(() =>
 <ExportBtn key="func_excel" onExport={() => downloadCSV({rows})} />, [{rows}]);

Then warning message disappeared

React Data Table Component - getting Warning: Each child in a list should have a unique "key" prop

2 Answers2