Invalid hook call react hook, Using react-table to try and display some mock JSON

Question

I am trying to get a functioning react-table. I have stripped my project down to the absolute bare bones debugging what is going on, I don't understand why this is an invalid hook, is there a way I can get better information about what is wrong specifically or am I not reading the error correctly?

Errors on running below and all my code at bottom:

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

(happens twice in console): 
react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1630:1)
    at useTable (useTable.js:65:1)
    at PopulateTable (PopulateTable.js:12:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1630:1)
    at useTable (useTable.js:65:1)
    at PopulateTable (PopulateTable.js:12:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)

react-dom.development.js:18687 The above error occurred in the <PopulateTable> component:

    at PopulateTable (http://localhost:3000/static/js/bundle.js:122:65)
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1630:1)
    at useTable (useTable.js:65:1)
    at PopulateTable (PopulateTable.js:12:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)

I have a functional component PopulateTable.js :

import React, { useMemo } from 'react'
import { useTable } from 'react-table'
import DATA from './data.json'
import { COLUMNS } from './columns'



export const PopulateTable = () => {

    const columns = useMemo(() => COLUMNS, [])
    const data = useMemo(() => DATA, [])
    const tableInstance = useTable({ 
        columns,
        data
    })

    const { 
        getTableProps, getTableBodyProps, headerGroups, rows, prepareRow 
    } = tableInstance

    return (
        <table {...getTableProps()}>
            <thead>
                {headerGroups.map((headerGroup) => (
                    <tr {...headerGroup.getHeaderGroupProps()}> 
                        {headerGroup.headers.map((column) => (
                            <th {...column.getHeaderProps()}>{ column.render("Header") }</th>
                            ))}
                    </tr>
                ))}
            </thead>
            <tbody {...getTableBodyProps()}>
                {rows.map((row) => {
                    prepareRow(row)
                    return (
                        <tr {...row.getRowProps()}>
                            {row.cells.map((cell) => {
                                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                                })}
                        </tr>
                    )
                })}
            </tbody>
        </table>
    )
};

My App.js

import './App.css';
import React, { useState, useRef, useEffect } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import { PopulateTable } from './Component/PopulateTable';


function App() {
  
  return(
    <div>
         <PopulateTable />
    </div>
  )
}

export default App;

data.json:

[
        {
            "1": {
                "itemName": "Energy research",
                "profitPerHour": 821.6746356364301
            },
            "2": {
                "itemName": "Mining research",
                "profitPerHour": 742.7240922619478
            },
            "3": {
                "itemName": "Electronics research",
                "profitPerHour": 864.3855853308221
            }
        }
]

Finally columns.js:

export const COLUMNS = [
        {
            Header: "Item Name",
            accessor: "itemName" 
        },
        {
            Header: "Profit Per Hour",
            accessor: "profitPerHour"
        }
]

What am I doing wrong? I followed the link in the errors, I don't believe I am breaking any rules as far as being #1 inside functional component or #2 must have hooks at top of function. I followed this tutorial for the structure to the T and many that are very similar.

I followed the instruction to see if two react versions are conflicting, ran npm ls react from project folder. Returns one version of react and one version of react-table like I would expect.

└─┬ react-table@7.8.0
  └── react@18.2.0

score 0 · Accepted Answer · answered Aug 29 '22 at 02:31

0

Here, we can not directly use the data.json. We have to convert it into array of objects:

  const data = useMemo(() => {
    const rawData = DATA[0];
    return Object.keys(rawData).map((key) => rawData[key]);
  }, []);

Here is the example:

answered Aug 29 '22 at 02:31

yohanes

2,365
1
15
24

Thank you! Your example is working exactly how I would like from your CodeSandbox link, however even when I have copy + pasted your example code (with better indenting which is nice) over top of my files I get the same exact errors... must this mean I have some kind of conflicting dependencies or other issue with the installation? I would upvote but don't yet have the 15 updoots to be able to do so sorry. – Logan Pederson Aug 29 '22 at 02:48
have you tried to delete the node_modules first and install them again? – yohanes Aug 29 '22 at 02:55
I have not, this is my first project using react/node pretty much front end in general besides just html and css. Lost as to troubleshooting, I'm going back and forth between your example and mine just stumped as to how the example could run but not mine - I noticed in my package.json I have version react-scripts: "5.0.1" and your example used 4.0.0 so maybe something related to that. I'll read into what node_modules is as I'm afraid to delete it without knowing exactly what to reinstall and how, maybe will make backup and then try deleting/reinstalling thank you for the help! – Logan Pederson Aug 29 '22 at 03:03
ok then. good luck. PS: this https://stackoverflow.com/a/63294579/8198873 might help you – yohanes Aug 29 '22 at 03:24
Got it working!! I force installed react-scripts 4.0.0 as the first time I tried deleting node_modules it installed back with ^2.x.x and I was getting different errors. So I tried again, this time removing all the package.json and package-lock.json files as well and then manually installing npm install react-scripts@4.0.0 but it bugs me that I don't know exactly what caused the issue, or how I would have known there was a problem. Any ideas how I can identify this in the future so I don't just bang my head against a wall for weeks until someone else figures it out? – Logan Pederson Aug 29 '22 at 03:32
Please avoid installing it manually. If you want to create a single app you can use CRA https://create-react-app.dev/. You can read the details here: https://reactjs.org/docs/create-a-new-react-app.html. – yohanes Aug 29 '22 at 03:38
I did use create-react-app to create this project that is why I am confused why things would not work as intended, when I manually installed it was after deleting the node_modules folder within the create-react-app created folder/project, thank you for the link though. – Logan Pederson Aug 29 '22 at 03:42

Invalid hook call react hook, Using react-table to try and display some mock JSON

1 Answers1

Linked