react.js

import React, { Component } from 'react'
import { Row, Col } from 'reactstrap';

import TotalCount from './widgets/TotalCounts';
import PivotWidget from './PivotWidget';

import BarGraph from './BarGraph';
import CustomTable from './CustomTable';
import DemoTable from './DemoTable';

import Loading from '../assets/img/loading.gif';

export default class Dashboard extends Component {
  constructor(props) {
    super(props)
    this.state = {
      sql_data: null,
      list_data: null
    }
  }

  componentWillMount() {
    fetch(`/api/get_counts`)
      .then(res => res.json()).then(data => {
        console.log(data)
        this.setState({ sql_data: data })
      }, [])
  }

  render() {
    return (
      <Row>
        <Col xs={6} md={6} lg={6}>
          { this.state.sql_data ? <DemoTable data={ this.state.sql_data } /> : <img src={Loading} /> }
          <hr />
          { this.state.sql_data ? <DemoTable data={ this.state.sql_data } /> : <img src={Loading} /> }
        </Col>

        <Col xs={6} md={6} lg={6}>
          { this.state.sql_data ? <BarGraph data={this.state.sql_data} /> : <img src={Loading} /> }
        </Col>
      </Row>
    )
  }
}