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?