data.forEach is not a function when using Axios and creating a table with React-table

Question

I am using react-table library along with axios to make the get call from api. my use efft looks like this.

 const [data, setData] = useState([]);
      useEffect(() => {
        (async () => {
          const result = await axios("http://site");
          setData(result.data)
        })();
      }, []);

  return (

    <div className="App">
      <Table columns={columns} data={data} />
    </div>
  );

I am however getting an error when trying to render the table. The error that I am getting seems to be coming from my Table.js file

Error: Table

src/Table.js:8
   5 | 
   6 | const [filterInput, setFilterInput] = useState("");
   7 | // Use the state and functions returned from useTable to build your UI
>  8 | const {
     | ^   9 |   getTableProps,
  10 |   getTableBodyProps,
  11 |   headerGroups,

I am new to using react-table, any ideas why? I did console.log the result and it is coming in as an object.

You seem to be attempting to render your data before it actually arrives. You need to do something, like return data && (.../* the rest of your JSX */ to check whether the data is available before render. — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Sep 17, 2020 at 12:53
@YevgenGorbunkov I think you may be right, that passed by me the first time. Whats a good way to do that in axios? — user14289833
– user14289833, Commented Sep 17, 2020 at 12:58
It's not about whether you get data or not, it's about when you get the data. — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Sep 17, 2020 at 17:50

Gaurab Kc · Accepted Answer · 2020-09-17 13:10:13Z

1

You need some kind of a 'Loading' component which will render until your axios is complete and you have data to render. You could use it like this:

return !data.length ? (<div>Loading..</div>) : (<div className="App">
  <Table columns={columns} data={data} />
</div>)

answered Sep 17, 2020 at 13:10

Gaurab Kc

8519 silver badges9 bronze badges

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

1 Comment

user14289833 Over a year ago

it wasnt this, just checked and I am geting the data in the console.

Collectives™ on Stack Overflow

data.forEach is not a function when using Axios and creating a table with React-table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related