Dashboard project

mainContent.jsx

import React, { Component } from "react";
import DataGrid from "./dataGrid";
import LineChart from "./charts/LineChart";
class MainContent extends Component {
  constructor() {
    super();
    this.state = {
      columnDefs: [
        {
          headerName: "Name",
          field: "name",
          checkboxSelection: true,
          sortable: true,
          filter: true
        },
        { headerName: "Year", field: "year", sortable: true, filter: true },
        {
          headerName: "Quarter",
          field: "quarter",
          sortable: true,
          filter: true
        },
        { headerName: "Count", field: "count", sortable: true, filter: true }
      ],
      rowData: [],
      chartData: []
    };
  }
  componentDidMount() {
    fetch("https://nataliia-radina.github.io/react-vis-example/")
      .then(response => response.json())
      .then(data => {
        this.setState({
          rowData: data.results,
          chartData: data.results.filter(data => data.name === "JavaScript")
        });
      });
  }
  render() {
    return (
      <React.Fragment>
        <div className="main-container">
          <div className="data-grid">
            <DataGrid
              columnDefs={this.state.columnDefs}
              rowData={this.state.rowData}
              rowSelection={"multiple"}
            />
          </div>
          <div className="data-chart">
            <LineChart chartData={this.state.chartData} />
          </div>
        </div>
      </React.Fragment>
    );
  }
}
export default MainContent;