replace class with a simple function call back
This commit is contained in:
parent
2377b4c062
commit
3c5e012444
27
src/index.js
27
src/index.js
@ -2,40 +2,27 @@ import React from 'react';
|
|||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
|
|
||||||
class Square extends React.Component {
|
function Square(props){
|
||||||
//constructor(props) {
|
|
||||||
// super(props);
|
|
||||||
// this.state = {};
|
|
||||||
//}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
return (
|
||||||
//we want to bake a function into this JSX so alert isn't called with every render
|
<button className="square" onClick={props.clickfunc}>
|
||||||
//<button className="square" onClick={() => alert('click')}>
|
{props.value}
|
||||||
//<button className="square" onClick={() => this.setState(this.props)}>
|
|
||||||
<button
|
|
||||||
className="square"
|
|
||||||
//onClick={() => this.setState({value: 'X'})}
|
|
||||||
onClick={() => this.props.clickfunc()}
|
|
||||||
>
|
|
||||||
{this.props.value}
|
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
class Board extends React.Component {
|
class Board extends React.Component {
|
||||||
constructor(props){
|
constructor(props){
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
squares : Array(9).fill(null)
|
squares : Array(9).fill(null)
|
||||||
|
,xIsNext: true
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
handleClick(i) {
|
handleClick(i) {
|
||||||
const squares = this.state.squares.slice();
|
const squares = this.state.squares.slice();
|
||||||
squares[i] = 'X';
|
squares[i] = this.state.xIsNext ? 'X' : 'O';
|
||||||
this.setState({squares: squares});
|
this.setState({squares: squares,xIsNext: !this.state.xIsNext});
|
||||||
}
|
}
|
||||||
|
|
||||||
renderSquare(i) {
|
renderSquare(i) {
|
||||||
@ -52,7 +39,7 @@ class Square extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const status = 'Next player: X';
|
const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
Loading…
Reference in New Issue
Block a user