...

src/Components/LeagueTable.jsx

@@ -9,8 +9,8 @@ class LeagueTable extends React.Component
     constructor()
     {
         super()
-        // this.league = this.props.league;
-        this.league = {//Leagues[0]
+        // this.League = this.props.League;
+        this.League = {//Leagues[0]
             "name":"Legendary League",
             "players":
             [
@@ -48,7 +48,7 @@ class LeagueTable extends React.Component
     }
     rows()
     {
-       return this.league.players.map(({ name, points, playedMatches }) => {
+       return this.League.players.map(({ name, points, playedMatches }) => {
             return <tr key={name} >
             <td>{name}</td>
             <td>{points}</td>
@@ -60,12 +60,10 @@ class LeagueTable extends React.Component
     {
         return (
             <div className='tableContainer' >
-                <h3>{this.league.name}</h3>
+                <h3>{this.League.name}</h3>
                 <table>
                     {this.tableHeaders()}
-                    <tbody>
-                        {this.rows()}
-                    </tbody>
+                    {this.rows()}
                 </table>
             </div>
         )

src/Components/LeaguesTable.jsx

@@ -0,0 +1,74 @@
+import './LeagueTable.css'
+
+import React from 'react'
+
+
+
+class LeaguesTable extends React.Component
+{
+    constructor(props)
+    {
+        super(props);
+        console.log('constructor', props);
+        // this.leagues = this.props.leagues;
+        this.Leagues =[{//Leagues[0]
+            "name":"Legendary League",
+            "players":
+            [
+              {
+                "name":"hc12",
+                "points":10,
+                "playedMatches":10
+              },
+              {
+                "name":"DashPT5",
+                "points":10,
+                "playedMatches":10
+              }
+            ],
+            "games":
+            [
+              {
+                "_id":"String"
+              },
+              {
+                "_id": "String"
+              }
+            ]
+          },
+          { ",name":"League0"},
+          {"name":"League1"}
+        ]
+    }
+    headers()
+    {
+        return(
+            <tr>
+                <th>Leagues</th>
+            </tr>
+        )
+    }
+    rows()
+    {
+        return this.Leagues.map(({name}) => {
+            return <tr key={name} >
+            <td onClick={this.goToLeague}>{name}</td>
+            </tr>
+            })
+    }
+    goToLeague = (event)=>
+    {
+        console.log(this.props)
+        this.props.GoTo(event.target.innerHTML);
+    }
+    render()
+    {
+        return(
+            <table>
+                {this.headers()}
+                {this.rows()}
+            </table>
+        )
+    }
+}
+export default LeaguesTable

src/Components/Navigation.jsx

@@ -18,6 +18,7 @@ class Navigation extends React.Component
           </div>
           
           <Routes>
+            <Route exact path="/" element={<Leagues/>}/>
             <Route exact path="/Leagues" element={<Leagues/>}/>
             <Route exact path="/Games" element={<Games/>}/>
           </Routes>     

src/Pages/Leagues.jsx

@@ -1,18 +1,36 @@
 
 import React from 'react';
-import Table from '../Components/LeagueTable'
+import LTable from '../Components/LeagueTable'
+import Table from '../Components/LeaguesTable'
+var page = null;
+function goTo (where)
+{
+   return page = where;
+}
 function getLeague()
 {
+    //TODO
 
 }
+function getAllLeagues()
+{
+    //TODO
+}
 function Leagues() {
-return (
+
+    return (
     <div>
         <br></br>
         <br></br>
         <br></br>
         <br></br>
-        <Table league={getLeague}/>
+        {page?
+        (
+            <LTable League={getLeague} test="test" GoTo={goTo}/> 
+        ):
+        (
+            <Table Leagues={getAllLeagues}/>
+        )}
     </div>
 )
 }