reactjsreact-propsreact-tabletanstack

Error in accessing API data in child component in React TanStack v8


I am using TanStack v8 to represent tabular data. Below is my app(HomePage) structure. On HomePage, I am fetching data from API using useEffect and passing it to EmailTable.

<Header />
<Statistics />
{emails.length > 0 ? (
  <EmailTable
    emails={emails}
    isLoading={isLoading}
  />
  ) : (
  <Spinner />
)}

In EmailTable component, I am able to access/log the emails(api data). But, when I am passing that emails to useReactTable, I am getting multiple errors like Cannot read properties of undefined (reading 'length'). If I am storing emails data to some different variable and passing that variable to useReactTable, it is working fine.

EmailTable component


Solution

  • This is because the type of function parameters does not match. The emails is not in the options of useReactTable function parameter. The options of the useReactTable function parameter can be found here.