replace class with a simple function call back

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>