1

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?
Juhyun Park
  • 141
  • 1
  • 12
  • 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

2 Answers2

0

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
        />
Lex V
  • 1,414
  • 4
  • 17
  • 35
0

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

Juhyun Park
  • 141
  • 1
  • 12