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

Admin 1
Viewed 1753

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.

axios react-table react-hooks reactjs javascript
1 Answers

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>)
user_51721160
Related