Seham Hammad
asked on
Datatables with React
Hi experts,
I am trying to display datatable from a jsonresponse using fetch(url) into react componnet
but form some reason I can not see the table in the page.
Thanks very much in advance
here is my code
(NetworkStatus Component.)
and here is the route in the App component
I am trying to display datatable from a jsonresponse using fetch(url) into react componnet
but form some reason I can not see the table in the page.
Thanks very much in advance
here is my code
(NetworkStatus Component.)
import React, { Component } from "react";
import { Route, Redirect } from "react-router-dom";
import ReactDOM from "react-dom";
import $ from 'jquery';
import "react-table/react-table.css";
import { create } from "domain";
import DataTable from 'datatables.net'
$.DataTable = require('datatables.net');
export class NetworkStatus extends Component {
state ={ data:[] }
createTable = (data) => {
const tableColumns = [
{Name:'name', prop:'name'},
{Name:'EU_ID', prop:'eu_id'},
{Name:'Sensor_Id', prop:'sensor_id'},
{Name:'IP_Address', prop:'ip_address'},
{Name:'Latitute', prop:'latitute'},
{Name:'Longitute', prop:'longitute'},
{Name:'Type', prop:'type'},
{Name:'Last_Coms', prop:'last_coms'},
{Name:'Last_Data', prop:'last_data'},
{Name:'Last_Purged', prop:'last_purged'},
]
return (
<DataTable
keys="id"
columns= {tableColumns}
initialData={data}
/>
);
}
componentDidMount() {
var url = 'http://localhost:5000/Sensors';
fetch(url)
.then(response => response.json())
.then(rows => {
this.setState({data:rows})
});
}
render() {
return (
<div> {this.createTable(this.state.data)}</div>
)
}
}
export default NetworkStatus;
and here is the route in the App component
/>
<Route
path="/networkstatus"
render={props =>
this.auth.isAuthenticated() ? (
<NetworkStatus data={this.LoadDataTable} auth={this.auth} {...props} />
) : (
this.auth.login()
)
}
/>
ASKER
this link that I tell the component know how to talk to the backend that runs on node js using another web server
ASKER
react runs on 3000 and the back end server runs on the 5000
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
and not : var url = '/Sensors';
it look like you're facing a cross-domain issue : you're not using same protocol between the client, your application and the server