Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

547
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda