Search code examples
javascriptreactjsreact-nativeresettic-tac-toe

Can't Make Div Value Empty with button function in ReactJs


I want to add a reset button to a tic tac toe game. It shall clear the value in every div element. The function I came up with (see below) clears the value in the console but in UI it still remains X or O. I have defined a state in constructor function like board: Array(9).fill(''). Then I take the value X or Y with the help of click event target attribute. Here is my sample code:

class App extends Component {
  constructor(){
    super();
    this.state = {
      turn: 'X',
      gameEnded: false,
      board: Array(9).fill(''),
      totalMoves : 0
    }
  }
  clicked(event){
    if(this.state.gameEnded == true) return;
    if( this.state.board[event.target.dataset.square] === ''){
    this.state.board[event.target.dataset.square] = this.state.turn;
    event.target.innerText = this.state.turn;
    this.setState({
      turn: this.state.turn === 'X' ? 'O' :'X',
      totalMoves: this.state.totalMoves+1
    })
  }
  var result = this.checkWinner();}
  reset(){
      var board = this.state.board;
      for(let j=0;j < 9 ; j++){
         board[j] = null;
      }
      console.log(this.state.board);}
render() {
    return (
      <div id="board" onClick={(e)=>this.clicked(e)}>
            <div className= "square"  data-square= "0" ></div>
            <div className= "square"  data-square= "1"></div>
            <div className= "square"  data-square= "2"></div>
            <div className= "square"  data-square= "3"></div>
            <div className= "square"  data-square= "4"></div>
            <div className= "square"  data-square= "5"></div>
            <div className= "square"  data-square= "6"></div>
            <div className= "square"  data-square= "7"></div>
            <div className= "square"  data-square= "8"></div>
      </div>
      <div id="foot"><button className="button" onClick={()=>this.reset()}>Reset</button></div>
      </div>
    ); }}

Solution

  • I did not style the game but I tried to show a quick way so you can learn how to solve the issue. Instead of setting the inner text for you Divs, you need to bind state to that. Here's a simple working example. You can edit and customize it yourself.

    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          turn: 'X',
          gameEnded: false,
          board: Array(9).fill(''),
          totalMoves: 0
        }
      }
    
      clicked(event) {
        if (this.state.gameEnded == true) return;
        if (this.state.board[event.target.dataset.square] === '') {
          this.state.board[event.target.dataset.square] = this.state.turn;
          this.setState({
            turn: this.state.turn === 'X' ? 'O' : 'X',
            totalMoves: this.state.totalMoves + 1
          })
        }
      }
    
      reset() {
        this.setState({
          board: Array(9).fill('')
        })
      }
    
      render() {
        return ( 
         <div id = "board"
          onClick = {
            (e) => this.clicked(e)
          } >
          <div className = "square" data-square = "0" >{this.state.board[0]}< /div>
          <div className = "square" data-square = "1" >{this.state.board[1]}< /div>
          <div className = "square" data-square = "2" >{this.state.board[2]}< /div>
          <div className = "square" data-square = "3" >{this.state.board[3]}< /div>
          <div className = "square" data-square = "4" >{this.state.board[4]}< /div>
          <div className = "square" data-square = "5" >{this.state.board[5]}< /div>
          <div className = "square" data-square = "6" >{this.state.board[6]}< /div>
          <div className = "square" data-square = "7" >{this.state.board[7]}< /div>
          <div className = "square" data-square = "8" >{this.state.board[8]}< /div>
          <div id = "foot" > < button className = "button"
          onClick = {
            () => this.reset()
          } > Reset < /button></div >
          </div>
        );
      }
    }
    
    ReactDOM.render( <
      App / > ,
      document.getElementById('root')
    );
    .square {
    border: 1px solid red;
    width: 20px;
    height: 20px;
    }
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <div id="root" />