refactored by removing tabs

src/App.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import './App.css';
-import ServerAnalytics from './ServerAnalytics';
+import ServerTable from './ServerTable';
 
 class App extends React.Component {
   public render() {
     return (
       <div className="App">
-        <ServerAnalytics/>
+        <ServerTable />
       </div>
     );
   }

src/Chart.tsx

@@ -11,9 +11,9 @@ export class Chart extends React.Component<any, any> {
   public render() {
     const data = this.props.data;
     return (
-      <ResponsiveContainer width="100%" height={800}>
+      <ResponsiveContainer width="100%" height={200}>
         <PieChart>
-          <Pie data={data} dataKey="age" cx={500} cy={200} outerRadius={80} fill="#82ca9d" />
+          <Pie data={data} dataKey="age" cx={600} cy={100} outerRadius={80} fill="#82ca9d" />
           <Tooltip />
         </PieChart>
       </ResponsiveContainer>

src/ServerAnalytics.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import 'react-tabs/style/react-tabs.css';
-import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
-import { ServerTable } from './ServerTable';
-import { Chart } from './Chart';
-import * as Papa from 'papaparse';
-
-export default class ServerAnalytics extends React.Component<any, any> {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      filteredData: [],
-      headers: [],
-      data: []
-    }
-    const loaded = (results: any) => {
-      const localstate = this;
-      localstate.setState({
-        headers: results.meta.fields,
-        data: results.data
-      });
-    }
-    Papa.parse('/data.csv', {
-      header: true,
-      download: true,
-      skipEmptyLines: true,
-      dynamicTyping: true,
-      complete: loaded
-    });
-  }
-  public render() {
-    const setData = (filteredData: any) => {
-      this.setState({
-        filteredData
-      });
-    };
-    const data = this.state.data;
-    const headers = this.state.headers;
-    return (
-      <div className="App">
-        <Tabs>
-          <TabList>
-            <Tab>
-              Server Table
-            </Tab>
-            <Tab>Charts</Tab>
-          </TabList>
-          <TabPanel>
-            <ServerTable {...{ setData, data, headers }} />
-          </TabPanel>
-          <TabPanel>
-            <Chart data={this.state.filteredData} />
-          </TabPanel>
-        </Tabs>
-      </div>
-    );
-  }
-}

src/ServerTable.tsx

@@ -1,22 +1,40 @@
 import * as React from 'react';
 import { Tips } from "./Utils";
 import * as _ from 'lodash';
+import { Chart } from './Chart';
 const reactcsv = require('react-csv');
 const CSVLink = reactcsv.CSVLink;
+import * as Papa from 'papaparse';
 
 // Import React Table
 import ReactTable from 'react-table';
 import "react-table/react-table.css";
 
-export class ServerTable extends React.Component<any, any> {
+export default class ServerTable extends React.Component<any, any> {
-  private lastFiltered: any[] = []
   constructor(props: any) {
     super(props);
+    this.state = {
+      headers: [], data: []
+    }
+    const loaded = (results: any) => {
+      const localstate = this;
+      localstate.setState({
+        headers: results.meta.fields,
+        data: results.data
+      });
+    }
+    Papa.parse('/data.csv', {
+      header: true,
+      download: true,
+      skipEmptyLines: true,
+      dynamicTyping: true,
+      complete: loaded
+    });
   }
 
   public render() {
-    const data = this.props.data;
+    const data = this.state.data;
-    const headers = this.props.headers;
+    const headers = this.state.headers;
     const filterPart = (filter: any, row: any) =>
       String(row[filter.id]).startsWith(filter.value) ||
       String(row[filter.id]).endsWith(filter.value)
@@ -29,7 +47,6 @@ export class ServerTable extends React.Component<any, any> {
         accessor: headerName
       }
     }
-    debugger;
     const headerCols = headers.map(headerGen);
     return (
       <ReactTable
@@ -43,12 +60,13 @@ export class ServerTable extends React.Component<any, any> {
           height: "450px"
         }}
       >
-        {(state, makeTable,) => {
+        {(state, makeTable, ) => {
-          this.lastFiltered = state.sortedData.map((o: any) => _.pick(o, headers));
+          const lastFiltered = state.sortedData.map((o: any) => _.pick(o, headers));
           return (
             <div>
               {makeTable()}
-              <CSVLink data={this.lastFiltered} filename={"data.csv"}>
+              <Chart data={lastFiltered} />
+              <CSVLink data={lastFiltered} filename={"data.csv"}>
                 Click here to download CSV file
               </CSVLink>
               <br />
@@ -61,10 +79,6 @@ export class ServerTable extends React.Component<any, any> {
     );
   }
 
-  public componentWillUnmount() {
-    this.props.setData(this.lastFiltered);
-  }
-
   public loaded(results: any) {
     this.setState({
       headers: results.meta.fields,