React Table renders data undefined

Question

I'm currently working on a React table that is going to be populated by a REST API call. The following is the output:

[{"zone":"Central","location":"Atlantic Superstore","address":"650 Portland St, Dartmouth","date":"05/13/2021","exposure":"09:00 - 11:30","advice":"Get tested immediately"},{"zone":"Central","location":"Sobeys Mumford","address":"6990 Mumford Road, Halifax","date":"31/05/2021","exposure":"13:00 - 14:30","advice":"Get tested Immediately"}]

I call it using the following code:

export function GetContacts() {
const [loadingData, setLoadingdata] = useState(true);
const [contacts, setContacts] = useState([]);


useEffect(() => {
    fetch(
        `https://mz6gux8sca.execute-api.us-east-1.amazonaws.com/dev/contact`,
        {
            method: 'GET'
        }
    )
    .then(res => res.json())
    .then(response => {
        setContacts(response);
        setLoadingdata(false);
     })
    .catch(error => console.log(error));
}, [])

console.log("contacts: ", contacts)

const columns = React.useMemo(
    () => [
        {
           Header: "Zone",
           accessor: "zoneID", 
        },
        {
            Header: "Location",
            accessor: "contactLocation",
        },
        {
            Header: "Address",
            accessor: "address",
        },
        {
            Header: "Date",
            accessor: "date",
        },
        {
            Header: "Window",
            accessor: "exposureWindow",
        },
        {
            Header: "Advice",
            accessor: "advice",
        },
    ],
    [],
);

Which works, and in the console I get a properly populated contacts list. However, as soon as I add the following:

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

An error is thrown, and the console output of contacts is empty. The error is TypeError: Cannot read property 'forEach' of undefined. -- presumably because contacts is empty. If I remove that block, everything goes back to working properly. I'm at a loss here, so any insight would be greatly appreciated.

Jirka Svoboda · Accepted Answer · 2021-06-04 20:20:13Z

1

I think you are passing hook options in wrong way. React Table expects data options so useTable({ columns, data: contacts }) should work.

answered Jun 4, 2021 at 20:20

Jirka Svoboda

4183 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

React Table renders data undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related