Taking X and O both turns in application

Author: ajeetchaulagain

src/index.js

@@ -2,17 +2,16 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 
-class Square extends React.Component {
+function Square(props) {
 
-    render() {
       return (
         <button className="square" 
-        onClick = {() => this.props.onClick()}
+        onClick = {props.onClick}
         >
-          {this.props.value}
+          {props.value}
         </button>
       );
-    }
+    
   }
 
   class Board extends React.Component {
@@ -21,13 +20,17 @@ 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) {
       return (
@@ -39,7 +42,7 @@ class Square extends React.Component {
     }
 
     render() {
-      const status = 'Next player: X';
+      const status = 'Next player: '+ (this.state.xIsNext ? 'X' : 'O');
 
       return (
         <div>