mercredi 31 octobre 2018

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;




Aucun commentaire:

Enregistrer un commentaire