Game list logs selected game's id.

src/components/GameList.js

+import React, { Fragment } from 'react';
+
+class GameList extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      games: []
+    }
+  }
+
+  componentDidMount() {
+    fetch('http://localhost:5000/game/listgames')
+    .then(response => response.json())
+    .then(games => this.setState({games}))
+    .catch(error => {console.log(error);})
+  }
+
+  handleChange = (e) =>{
+    console.log(e.target.value);
+  }
+
+  render() {
+    let items = [];
+
+    for (let i = 0; i < this.state.games.length; i++) {
+      const element = this.state.games[i];
+      items.push(
+        <option key={element.id} value={element.id}>{element.name}</option>
+      );
+    }
+
+    return (
+      <Fragment>
+        <label>Game: </label>
+        <select onChange={this.handleChange}>
+          {items}
+        </select> 
+      </Fragment>
+    );
+  }
+}
+ 
+export default GameList;
\ No newline at end of file

src/components/Header.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import LoginForm from './LoginForm';
 import RegisterForm from './RegisterForm';
+import GameList from './GameList';
 
 class Header extends React.Component {
   state = {
@@ -78,13 +79,7 @@ class Header extends React.Component {
           )}
           {this.state.username && <button>{this.state.username}</button>}
           <button onClick={this.props.handleLayerChange}>change layer</button>
-          <label>Zoom: </label>
-          <select onChange={this.props.handleZoom}>
-            <option value="13">13</option>
-            <option value="10">10</option>
-            <option value="5">5</option>
-            <option value="15">15</option>
-          </select> 
+          <GameList />
         </div>
         {this.state.register && (
           <RegisterForm