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;