understanding super and props system

Signed-off-by: Tathagat Thapliyal <[email protected]>

Author: tathagat2006

src/components/Board.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import Square from './Square'
 
-export default function Board() {
+export default function Board(props) {
   return (
     <div>
       <div className="border-row">
-        <Square/>
+        <Square insideValue = {props.value}/>
         <Square/>
         <Square/>
       </div>

src/components/Game.js

@@ -2,21 +2,27 @@ import React from 'react'
 import Board from './Board'
 
 export default class Game extends React.Component {
-  constructor() {
-    super()
+  constructor(props) {
+    super(props)
     this.state = {
       xIsNext: true,
       stepNumber: 0,
       history: [
         {squares: Array(9).fill(null)}      
-      ]
-    }
-  }  
+      ],
+    } 
+  } 
+
+  someFunction = () => {
+    return 5
+  }
+
   render() {
+    const result = this.someFunction()
     return(
       <div className= "game">
         <div className = "game-board">
-          <Board/>
+          <Board value = {result}/>
         </div>
       </div>
     )

src/components/Square.js

@@ -1,9 +1,9 @@
 import React from 'react'
 
-export default function Square() {
+export default function Square(props) {  
   return (
     <button className =  "square">
-      
+      {props.insideValue}
     </button>
   )
 }