3rd step: Link Board Component with the Game Component.

Mrcel97 · Aug 21, 2018 · 29cb77f · 29cb77f
1 parent 75c1b5c
commit 29cb77f
Showing 1 changed file with 24 additions and 1 deletion.
diff --git a/src/index.js b/src/index.js
@@ -7,7 +7,7 @@ class Game extends React.Component {
         return (
         <div className="game">              {/* React comment example */}
             <div className="game-board">    {/* Space destined to host an specific component */}
-            Game Board
+                <Board />                   {/* (3rd step) Link Board component with Game component */}
             </div>
             <div className="game-info">     {/* Space destined to log Game actions */}
             </div>
@@ -16,6 +16,29 @@ class Game extends React.Component {
     }
 }
 
+
+class Board extends React.Component {
+    render() {
+        const status = 'Next Player X';     // Board need to know who is playing, set initial Board state to player 'X' or 'O'.
+
+        return (                            // We want a [3row x 3col] tic-tac-toe
+            <div>
+                <div className="status">{status}</div>
+                <div className="board-row">Row
+                    {/* Insert row-Squares-amount here (4th step) */}
+                </div>
+                <div className="board-row">Row
+                    {/* Insert row-Squares-amount here (4th step) */}
+                </div>
+                <div className="board-row">Row
+                    {/* Insert row-Squares-amount here (4th step) */}
+                </div>
+            </div>
+        );
+    }
+}
+
+
 // ==================================
 
 ReactDOM.render(