Q:

Creating multiple tables in ReactJS

I'm in the process of learning ReactJS. Right now I'm learning how tables work. Right now, I have a single working table that is loaded with JSON data, but I want to create a second table. Right now I keep running into this error:

Module build failed: D:/Documents/Web
  Programming/React/my-app/src/App.js: Duplicate declaration "Table"

I've tried to rename the Table class, but that throws additional errors. What would be the best way to handle multiple tables using this approach?
import React, { Component } from "react";
import "./CSS/App.css";
import Table1 from "./Table1";
import Axios from 'axios';
import CoinTable from './components/coin-table'
import coinData from './data/coins.json'
//import DBConfig from "./API/DBConfig"; // can't do because you need to have the api 

// creates a "template" of the components that will be used
// Header and Content need to be capitalized in order to work
class App extends Component
{
  render()
  {
    return( // left paren has to go there otherwise it'll fail out
      <div>
        <Header/>
        <Content/> 
        <Table/>
        <Table/>
      </div>
    );
  }
}

class Header extends Component
{
  render()
  {
    return(
      <div>
        <center><h1>Learning React</h1></center>
      </div>
    );
  }
}

class Content extends Component {
  render() 
  {
    return (
        <div>
           <h2>Content</h2>
           <p>The content text!!</p>
        </div>
     );
  };
};

// coin information table
class Table extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Coin Information</p>
        <Table1 data={coinData}/>
      </div>
    );
  };
}; 

// Actor information table
class Table extends Component {
  render() {
    return (
      <div className="App2">
        <p className="Table-header">Actor Table</p>
      </div>
    );
  };
};

export default App;

EDIT: What I get when I change the class names
Failed to compile.

./src/App.js
Module build failed: D:/Documents/Web Programming/React/my-app/src/App.js: Duplicate declaration "Table"

  83 |
  84 | // Actor information table
> 85 | class Table extends Component {
     |       ^
  86 |   render() {
  87 |     return (
  88 |       <div className="App2">
Compiling...
Failed to compile.

./src/App.js
Module build failed: D:/Documents/Web Programming/React/my-app/src/App.js: Duplicate declaration "CoinTable"

  72 |
  73 | // coin information table
> 74 | class CoinTable extends Component {
     |       ^
  75 |   render() {
  76 |     return (
  77 |       <div className="App">
Compiling...
Failed to compile.

./src/App.js
Module build failed: D:/Documents/Web Programming/React/my-app/src/App.js: Duplicate declaration "CoinTable"

  72 |
  73 | // coin information table
> 74 | class CoinTable extends Component {
     |       ^
  75 |   render() {
  76 |     return (
  77 |       <div className="App">

A:

Because you have two classes with same name and thats why you get duplication error
You also need to export Content, CoinTable, ActorTable like I did below
Try with below code
import React, { Component } from "react";
import "./CSS/App.css";
import Table1 from "./Table1";
import Axios from 'axios';
//import CoinTable from './components/coin-table'
import coinData from './data/coins.json'
//import DBConfig from "./API/DBConfig"; // can't do because you need to have the api 

// creates a "template" of the components that will be used
// Header and Content need to be capitalized in order to work
class App extends Component
{
  render()
  {
    return( // left paren has to go there otherwise it'll fail out
      <div>
        <Header/>
        <Content/> 
        <CoinTable/>
        <ActorTable/>
      </div>
    );
  }
}

export class Header extends Component
{
  render()
  {
    return(
      <div>
        <center><h1>Learning React</h1></center>
      </div>
    );
  }
}

export class Content extends Component {
  render() 
  {
    return (
        <div>
           <h2>Content</h2>
           <p>The content text!!</p>
        </div>
     );
  };
};
// coin information table
export class CoinTable extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Coin Information</p>
        <Table1 data={coinData}/>
      </div>
    );
  };
}; 

// Actor information table
export class ActorTable extends Component {
  render() {
    return (
      <div className="App2">
        <p className="Table-header">Actor Table</p>
      </div>
    );
  };
};

export default App;

