title: React-Table + Axios rendering error - data.forEach is not a function
body: <p>I see this is a fairly common question, sorry to ask it again but none of the answers to similar questions work for me. Using the very popular Axios / React-Tutorial, I'm able to pull and render info with this call -</p>
  <pre><code>  useEffect(() =&gt; {
      (async () =&gt; {
        const result = await axios(&quot;https://api.tvmaze.com/search/shows?q=snow&quot;);
        setData(result.data);
      })();
    }, []);
  </code></pre>
  <p>If I switch it out for the API I'm trying to call, it looks like this -</p>
  <pre><code>      useEffect(() =&gt; {
      (async () =&gt; {
        const result = await axios('https://cors-anywhere.herokuapp.com/https://api.myanimelist.net/v2/anime/30230?fields=id,title,genres',{
            headers: { 'X-MAL-CLIENT-ID' : 'THIS IS WHERE MY API KEY WOULD GO',
            'Access-Control-Allow-Origin' : '*',},
            responseType: 'json'
                  });
        setData(result.data);
      })();
    }, []);
  </code></pre>
  <p>As you can guess, running this gets me various shades of 'useTable.js:591 Uncaught TypeError: data.forEach is not a function'</p>
  <p>If I console.log the various elements here I see objects coming down the pipes, similar to the tutorial example. Data looks identical in terms of how it's organized. But for whatever reason the rendering component just refuses to run.</p>
  <p>I saw another solution hint the issue was the table rendering before the data is ready and suggested adding something like 'return !data.length ? (Loading..)' to the return clause, but when I do that the site just hangs indefinitely. No errors but nothing happens either. I'm working with two files, App.js and Table.js. Any assistance would be greatly appreciated. Posting full code below -</p>
  <pre><code>//App.js
  import React, { useMemo, useState, useEffect } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  import Table from &quot;./Table&quot;;
  import &quot;./App.css&quot;;
  
  function App() {
      
        const [data, setData] = useState([]);
  
    useEffect(() =&gt; {
        axios
        .get('https://cors-anywhere.herokuapp.com/https://api.myanimelist.net/v2/anime/30230?fields=id,title,genres',{
            headers: { 'X-MAL-CLIENT-ID' : 'REDACTED',
            'Access-Control-Allow-Origin' : '*',},
            responseType: 'json'
                  })
        .then(result =&gt; setData(result.data))
    }, []);
  
  
    const columns = useMemo(
      () =&gt; [
        {
          
            
              Header: &quot;TITLE&quot;,
              accessor: &quot;title&quot;
            
          
        }
      ],
      []
    );
  
  console.log(columns)
  console.log(data)
  console.log('this is property data ' +Object.getOwnPropertyNames(data))
  
    return  (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Table columns={columns} data={data} /&gt;
      &lt;/div&gt;
    );
  
  }
  
  export default App;
  
  
  
  // Table.js
  
  import React from &quot;react&quot;;
  import { useTable } from &quot;react-table&quot;;
  
  export default function Table({ columns, data }) {
    // Use the useTable Hook to send the columns and data to build the table
    const {
      getTableProps, // table props from react-table
      getTableBodyProps, // table body props from react-table
      headerGroups, // headerGroups, if your table has groupings
      rows, // rows for the table based on the data passed
      prepareRow // Prepare the row (this function needs to be called for each row before getting the row props)
    } = useTable({
      columns,
      data
    });
  
    /* 
      Render the UI for your table
      - react-table doesn't have UI, it's headless. We just need to put the react-table props from the Hooks, and it will do its magic automatically
    */
    return (
      &lt;table {...getTableProps()}&gt;
        &lt;thead&gt;
          {headerGroups.map(headerGroup =&gt; (
            &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
              {headerGroup.headers.map(column =&gt; (
                &lt;th {...column.getHeaderProps()}&gt;{column.render(&quot;Header&quot;)}&lt;/th&gt;
              ))}
            &lt;/tr&gt;
          ))}
        &lt;/thead&gt;
        &lt;tbody {...getTableBodyProps()}&gt;
   {// Loop over the table rows
         rows.map(row =&gt; {
           // Prepare the row for display
           prepareRow(row)
    return (
             &lt;tr {...row.getRowProps()}&gt;
               {// Loop over the rows cells
               row.cells.map(cell =&gt; {
                 // Apply the cell props
                 return (
                   &lt;td {...cell.getCellProps()}&gt;
                     {// Render the cell contents
                     cell.render('Cell')}
                   &lt;/td&gt;
                 )
               })}
             &lt;/tr&gt;
           )
         })}
       &lt;/tbody&gt;
     &lt;/table&gt;
    );
  }
  </code></pre>