Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

544
Views
Uncaught TypeError: data.forEach is not a function React Table when i Pass Json Object to React Table Component

When I am Trying to Pass JSON Object to React Table

{
  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',
    },
  ];
}

How can I pass Array to React Table Component?

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(
    () => [
      {
        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 = () => {
    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(() => {
    getData();
  }, []);

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

export default App;
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!