Creating multiple tables in ReactJS

Question

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">

Because you have two classes with same name Table

Hemadri Dasari
– Hemadri Dasari

2018-10-31 20:31:53 +00:00
Commented Oct 31, 2018 at 20:31 — Hemadri Dasari
– Hemadri Dasari, Commented Oct 31, 2018 at 20:31

Hemadri Dasari · Accepted Answer · 2018-10-31 20:37:55Z

3

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;

edited Oct 31, 2018 at 20:37

answered Oct 31, 2018 at 20:35

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Matt Over a year ago

That's actually what I've tried - I'll update my question with the error that I get.

Hemadri Dasari Over a year ago

@Matt You need to export the components so that they will be available when you call them in the other component render though the components are declared within .js file you still need to export them so that they will be available

Hemadri Dasari Over a year ago

@Matt I just updated my code. Give a try now It would work

Matt Over a year ago

Awesome - that works. I guess that's what I get for using a bunch of different tutorials. Cheers!

Hemadri Dasari Over a year ago

@Matt you are welcome :) Please do upvote and accept the provided answer if it resolves the issue

|

Collectives™ on Stack Overflow

Creating multiple tables in ReactJS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest