title: Uncaught TypeError: data.forEach is not a function React Table when i Pass Json Object to React Table Component
body: <p>When I am Trying to Pass JSON Object to React Table</p>
  <pre><code>{
    leftRail: [
      {
        name: 'David',
        address: '4478 Valley Street, Garnerville, NY 10923',
        date: '07/11/2020',
        order: '87349585892118',
      },
      {
        name: 'John Parker',
        address: '63712 Kyle Street, Fullerton, NE 68638',
        date: '07/11/2020',
        order: '58418278790810',
      },
      {
        name: 'Lauren',
        address: '90612 Hart Country Lane, Toccoa, GA 30577',
        date: '07/10/2020',
        order: '81534454080477',
      },
    ];
    rightRail: [
      {
        name: 'George boykov',
        address: '24103 Edgewood Avenue, Fresno, CA 93721',
        date: '07/09/2020',
        order: '20452221703743',
      },
      {
        name: 'Robert Mcdonald',
        address: '8862 Hide A Way Road, Anaktuvuk Pass, AK 99721',
        date: '07/07/2020',
        order: '22906126785176',
      },
      {
        name: 'Nancy Abed',
        address: '245 Bryan Avenue, Minneapolis, MN 55406',
        date: '07/07/2020',
        order: '87574505851064',
      },
    ];
  }
  
  </code></pre>
  <p>How can I pass Array to React Table Component?</p>
  <pre><code>import React, { useMemo, useState, useEffect } from 'react';
  import Table from './Table';
  import './App.css';
  import sampleJson from './sample.json';
  
  function App() {
    const columns = React.useMemo(
      () =&gt; [
        {
          Header: 'Left Rail',
          columns: [
            {
              Header: 'Name',
              accessor: 'name',
            },
            {
              Header: 'Address',
              accessor: 'address',
            },
          ],
        },
        {
          Header: 'Right Rail',
          columns: [
            {
              Header: 'Date',
              accessor: 'date',
            },
            {
              Header: 'Order #',
              accessor: 'order',
            },
          ],
        },
      ],
      []
    );
  
    const [data, setData] = useState([]);
  
    const getData = () =&gt; {
      fetch(
        './data/json-data.json',
        //sampleJson
        {
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
          },
        }
      )
        .then(function (response) {
          console.log(response);
          return response.json();
        })
        .then(function (myJson) {
          console.log(myJson);
  
          setData(myJson);
        });
    };
  
    useEffect(() =&gt; {
      getData();
    }, []);
  
    // return  !data.length ? (&lt;div&gt;Loading..&lt;/div&gt;) : (
    return (
      &lt;div className='App'&gt;
        &lt;Table columns={columns} data={data} /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>