After following the example at while using react-table, everything worked as expected. However, when attempting to use my own data, I encountered an issue where I kept receiving a TypeError stating that 'data is undefined' in useTable. Even though my array contains the key id and I can see the items array in the console. Interestingly, if I use a predefined array like in the example, it works without any errors.
const [items, setItems] = useState(() => {
let init = new Array(0)
for(let i = 0; i < 2; i++){
init.push(collections[0].items[i])
}
return init;
})
const columns = React.useMemo(
() => [
{
Header: 'ID',
accessor: 'id',
},
], [],
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({ columns, items }, useSortBy); // ERROR HERE
edit:
I suspect that memoization of the items array might be the cause of this issue. But how should I go about doing this?
edit 2:
Upon further reflection, it seems memoizing the items array did not solve the problem. I revised my useState to:
const [items, setItems] = useState(React.useMemo(() => {
let init = new Array(0)
for(let i = 0; i < 2; i++){
init.push(collections[0].items[i])
}
return init;
}, []))
Still, I continue to receive the TypeError: data is undefined. Despite confirming that the items array does contain the correct data upon logging.