Updated Card functionality

src/Components/Board/index.js

@@ -20,8 +20,6 @@ export default class Board extends Component {
       name,
       score
     };
-    console.log(name + ": " + score);
-    console.log(newPlayer);
     e.target.elements.name.value = "";
     name ? this.addPlayer(newPlayer) : alert('Invalid Player');
   }
@@ -35,14 +33,22 @@ export default class Board extends Component {
     }))
   }
 
-  addScore = (e, points, player) => {
+  addScore = (e, points, player, id) => {
 
     var currentPlayerList = this.state.playerList.slice(0);
     currentPlayerList.forEach(e => { if(e.name === player){
       e.score += Number.parseInt(points);
     }});
 
     this.setState({playerList: currentPlayerList});
+
+    const questionCard = document.getElementById(id)
+    questionCard.style.display = "none";
+  }
+
+  addScoreNone = (e, id) => {
+    const questionCard = document.getElementById(id)
+    questionCard.style.display = "none";
   }
 
   render() {
@@ -67,10 +73,21 @@ export default class Board extends Component {
           <div className="col-2"><h5 align="center">Category 4</h5></div>
           <div className="col-2"><h5 align="center">Category 5</h5></div>
           <div className="col-2"><h5 align="center">Category 6</h5></div>
-          {this.props.questions.map((question,key) => <QuestionItem question={question} key={question.id} players={this.state.playerList} onAddScore={this.addScore}/>)}
+          {this.props.questions.map((question,key) => <QuestionItem question={question} key={question.id} players={this.state.playerList} onAddScore={this.addScore} onAddScoreNone={this.addScoreNone}/>)}
         </div>
         <div className="row">
-        {this.state.playerList.map((player) => <PlayerScore player={player}/>)}
+        <table className="table table-striped">
+          <thead>
+            <tr>
+              <th scope="col">Name</th>
+              <th scope="col">Score</th>
+            </tr>
+          </thead>
+          <tbody>
+          {this.state.playerList.map((player, key) => <PlayerScore player={player} key={key}/>)}
+          </tbody>
+        </table>
+
         </div>
       </div>
     )

src/Components/PlayerButton/index.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react'
 export default class index extends Component {
   render() {
     return (
-      <button type="button" className="btn btn-light" onClick={e => this.props.onAddScore(e, this.props.question.value, this.props.player.name)}>
+      <button type="button" className="btn btn-light" onClick={e => this.props.onAddScore(e, this.props.question.value, this.props.player.name, this.props.question.id)}>
         {this.props.player.name}
       </button>
     )

src/Components/PlayerScore/index.js

@@ -3,10 +3,10 @@ import React, { Component } from 'react'
 export default class PlayerScore extends Component {
   render() {
     return (
-      <div>
-        <p>{this.props.player.name}</p>
-        <p>{this.props.player.score}</p>
-      </div>
+      <tr>
+        <td>{this.props.player.name}</td>
+        <td>{this.props.player.score}</td>
+      </tr>
     )
   }
 }

src/Components/QuestionItem/index.js

@@ -6,12 +6,12 @@ export default class QuestionItem extends Component {
     const question = this.props.question;
     return (
       <div className="col-2">
-        <div className="card">
+        <div className="card" id={question.id}>
         <h5 align="center">{question.value}</h5>
         <div className="form-row text-center">
         <div className="col-12">
           {this.props.players.map((player,key) => <PlayerButton player={player} key={key} question={question} onAddScore={this.props.onAddScore}/>)}
-          <button type="button" className="btn btn-light">None</button>
+          <button type="button" className="btn btn-light" onClick={e => this.props.onAddScoreNone(e, this.props.question.id)}>None</button>
         </div>
       </div>
         </div>