replace class with a simple function call back

This commit is contained in:
Paul Trowbridge 2021-04-18 22:24:23 -04:00
parent 2377b4c062
commit 3c5e012444

View File

@ -2,26 +2,12 @@ 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) { return (
// super(props); <button className="square" onClick={props.clickfunc}>
// this.state = {}; {props.value}
//} </button>
);
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>
);
}
} }
class Board extends React.Component { class Board extends React.Component {
@ -29,13 +15,14 @@ class Square extends React.Component {
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>