From 3c5e012444fb4407cf8e689b9b7d2ba67589bef8 Mon Sep 17 00:00:00 2001
From: Paul Trowbridge <paul@hptrow.me>
Date: Sun, 18 Apr 2021 22:24:23 -0400
Subject: [PATCH] replace class with a simple function call back

---
 src/index.js | 33 ++++++++++-----------------------
 1 file changed, 10 insertions(+), 23 deletions(-)

diff --git a/src/index.js b/src/index.js
index adcb7bc..ca2029d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,26 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 
-class Square extends React.Component {
-    //constructor(props) {
-    //    super(props);
-    //    this.state = {};
-    //}
-
-    render() {
-      return (
-        //we want to bake a function into this JSX so alert isn't called with every render
-        //<button className="square" onClick={() => alert('click')}>
-        //<button className="square" onClick={() => this.setState(this.props)}>
-        <button 
-          className="square" 
-          //onClick={() => this.setState({value: 'X'})}
-          onClick={() => this.props.clickfunc()}
-        >
-          {this.props.value}
-        </button>
-      );
-    }
+function Square(props){
+  return (
+    <button className="square" onClick={props.clickfunc}>
+      {props.value}
+    </button>
+  );
 }
   
   class Board extends React.Component {
@@ -29,13 +15,14 @@ class Square extends React.Component {
         super(props);
         this.state = {
             squares : Array(9).fill(null)
+            ,xIsNext: true
         }
     };
 
     handleClick(i) {
         const squares = this.state.squares.slice();
-        squares[i] = 'X';
-        this.setState({squares: squares});
+        squares[i] = this.state.xIsNext ? 'X' : 'O';
+        this.setState({squares: squares,xIsNext: !this.state.xIsNext});
     }
 
     renderSquare(i) {
@@ -52,7 +39,7 @@ class Square extends React.Component {
     }
   
     render() {
-      const status = 'Next player: X';
+      const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
   
       return (
         <div>