Issue with react-table: TypeError: Cannot read property 'forEach' of undefined

Question

I'm working on a react frontend which calls an API and attempts to take the return JSON data and put in a table format using react-table. I've been stumped for a couple days now on this. I'm using only functions and hooks with React. My main component is:

const [tableJSON, setTableJSON] = useState('');
const [inquiryCount, setInquiryCount] = useState(1);
const [sortByColumn] = useState('INQ_RECEIVE_DATE');
const [sortByDirection] = useState('DESC');

const mid = memberId['usr-memberid'];

    const getInquiryData = async () => {
        try {
            const resp = await INQUIRY_API.inquiryList({ "memberId": mid, inquiryCount, sortByColumn, sortByDirection }, token['usr-token']);
            setTableJSON(resp);
            //return (resp);
        }
        catch (error) {
            console.log("Data load failed: " + error);
        }
    }

    useEffect(() => {
        getInquiryData();
    }, [inquiryCount]);


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

<HomeTableRT tabledata={tableJSON} />

My HomeTableRT component looks like:

import React, { Fragment, useEffect, useMemo } from 'react'
import '../../css/table.css';
import { useTable, useSortBy } from 'react-table'

const columns = React.useMemo(() => [
        { Header: 'Submitted by', accessor: 'submittedBy' },
        { Header: 'Inquiry PDF', accessor: 'inquiryId_pdf', },
        { Header: 'Report Type', accessor: 'reportType', },],
        [])

//const data = React.useMemo(() => JSON.stringify(props.tabledata), [props.tabledata])
const data = React.useMemo(() => props.tabledata, [props.tabledata])

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data }, useSortBy)

The last line throws the error TypeError: Cannot read property 'forEach' of undefined

I've been through the issues in react-table repo and it seems like this was raised as a problem in a version update but it seems long ago solved. I've search all over for other clues, but am stumped!

I'm using: react-table": "^7.2.0", "react-scripts": "^3.4.1",

Any help would be appreciated!

i don't see forEach being called anywhere on this post ? am i missing something. — BARNOWL
– BARNOWL, Commented Jul 13, 2020 at 19:09
Can you check to see what you're getting for columns and data — BARNOWL
– BARNOWL, Commented Jul 13, 2020 at 19:26
The forEach is in the useTable function from the react-table package: > 585 | data.forEach((originalRow, rowIndex) => 586 | accessRow(originalRow, rowIndex, 0, undefined, rows) — Anthony Cozzi
– Anthony Cozzi, Commented Jul 14, 2020 at 12:15
solved with a bit of a hack, created a function which I pass to use memo which transcribes the json into a hard coded version of the json elements. Hopefully I'll figure out something more reasonable and refactor later.... thanks all! — Anthony Cozzi
– Anthony Cozzi, Commented Jul 14, 2020 at 15:31

Artur A · Accepted Answer · 2021-08-19 19:38:23Z

3

The same error occurs if some forgets to pass data property to the useTable hook.

In my case it was the incorrect parameter name.

const changes = ...;
const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({ columns, changes });

The fix is:

useTable({ columns, data: changes });

This is not the exact solution for the asked question but might be handy for others.

answered Aug 19, 2021 at 19:38

Artur A

9,4991 gold badge64 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bstrihova · Accepted Answer · 2022-01-20 13:44:51Z

1

mine was shouting

TypeError: data.forEach is not a function accessRowsForColumn node_modules/react-table/dist/react-table.development.js:1453

I wanted to create a table with just one row - I was passing an object into data, but it needed to be an object within an array, so I simply did

<Table
columns={columns}
data={[myObject]}
/>

answered Jan 20, 2022 at 13:44

bstrihova

1811 silver badge4 bronze badges

1 Comment

Mohammad Over a year ago

If this is the workaround that solved your problem, then mark it as accepted to help others know it

Collectives™ on Stack Overflow

Issue with react-table: TypeError: Cannot read property 'forEach' of undefined

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related