title: The on click handler in React.js executes before the event happens. How can I stop that?
body: <p>You can also execute the script here <a href="https://codepen.io/tznqeyiq/pen/vYKNwKb" rel="nofollow noreferrer">https://codepen.io/tznqeyiq/pen/vYKNwKb</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        playStyle: '',
        playerOne: '',
        playerTwo: '',
        turn: 'one',
      };
      this.moveToNextPage = this.moveToNextPage.bind(this);
      this.onClickEventsForFirstPage = this.onClickEventsForFirstPage.bind(this);
      this.onClickEventsForSecondPage = this.onClickEventsForSecondPage.bind(this);
    }
    //// It all starts from here !!!!!!!!!!!!!!!!!!!1
    componentDidMount() {
      document.getElementById('start').style.display = 'flex';
      document.querySelector('#mainXOROdiv').style.display = 'none';
      document.querySelector('#playAreaMain').style.display = 'none';
      this.onClickEventsForFirstPage();
      this.onClickEventsForSecondPage();
    }
    /// componentDidMount is above !!!!!!!!!!!!!!!!!!!!
    /* event handlers for first page */
    onClickEventsForFirstPage() {
      var single = document.getElementById('single');
      single.addEventListener('click', () =&gt; {
        this.moveToNextPage(document.querySelector('#mainXOROdiv'));
        this.setState({
          playStyle: 'single'
        });
      });
      var double = document.getElementById('double');
      double.addEventListener('click', () =&gt; {
        this.moveToNextPage(document.querySelector('#mainXOROdiv'));
        this.setState({
          playStyle: 'double'
        });
      });
    }
    moveToNextPage(page) {
      document.getElementById('start').style.display = 'none';
      document.querySelector('#mainXOROdiv').style.display = 'none';
      document.querySelector('#playAreaMain').style.display = 'none';
      page.style.display = 'flex';
    }
    /* event handler for first page above
    event handler for second page below */
    onClickEventsForSecondPage() {
      var X = document.querySelector('#xInSpan');
      var O = document.querySelector('#oInSpan');
      var clickedBtn = '';
      X.addEventListener('click', () =&gt; {
        this.moveToNextPage(document.querySelector('#playAreaMain'));
        this.setState({
          playerOne: 'X',
          playerTwo: 'O'
        })
      });
      O.addEventListener('click', () =&gt; {
        this.moveToNextPage(document.querySelector('#playAreaMain'));
        this.setState({
          playerOne: 'O',
          playerTwo: 'X'
        })
      });
    }
    /*event handler for second page above */
    onClickEventsForBoxes = (e) =&gt; {
      if (e) {
        var a = event.target;
        console.log(this.state.playerOne, this.state.playerTwo);
        console.log(this.state.turn);
        if (this.state.turn = 'one') {
          this.setState({
            turn: 'two'
          });
          a.innerText = this.state.playerOne;
        } else {
          this.setState({
            turn: 'one'
          });
          a.innerText = this.state.playerTwo;
        }
      }
    }
    render() {
      return ( &lt;
        div id = "component" &gt;
        &lt;
        div id = "start"
        class = "centredivs" &gt;
        &lt;
        div class = "middledivs" &gt;
        &lt;
        h2 &gt; Choose game type &lt; /h2&gt; &lt;
        hr id = "horirow" / &gt;
        &lt;
        div class = 'deepestdivs' &gt;
        &lt;
        h3 id = "single"
        class = "firstheadings" &gt; SINGLE &lt; /h3&gt; &lt;
        h3 id = "double"
        class = "firstheadings" &gt; DOUBLE &lt; /h3&gt; &lt;
        /div&gt; &lt;
        /div&gt; &lt;
        /div&gt; &lt;
        div id = "mainXOROdiv"
        class = "centredivs" &gt;
        &lt;
        div class = "middledivs" &gt;
        &lt;
        h2 &gt; Would you like to be an X or O &lt; /h2&gt; &lt;
        div class = "deepestdivs" &gt;
        &lt;
        span class = "xoro"
        id = "xInSpan" &gt; X &lt; /span&gt;&lt;span id="oInSpan" class="xoro"&gt;O&lt;/span &gt;
        &lt;
        /div&gt; &lt;
        /div&gt; &lt;
        /div&gt; &lt;
        div id = "playAreaMain"
        class = "centredivs" &gt;
        &lt;
        div id = 'innerplayarea' &gt; {
          [1, 2, 3, 4, 5, 6, 7, 8, 9].map(data =&gt; ( &lt;
            button id = {
              data
            }
            onClick = {
              this.onClickEventsForBoxes
            }
            class = "boxes" &gt; &lt; /button&gt;
          ))
        } &lt;
        /div&gt; &lt;
        /div&gt;   &lt;
        /div&gt;
      );
    }
  }
  ReactDOM.render( &lt; App / &gt; , document.getElementById('app'));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  #component {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60vh;
    width: 60vh;
    height: 60vh;
    background: rgba(150, 160, 120, 0.3);
    border-radius: 10%;
    box-shadow: 0 0px 5px 0.01px black;
  }
  
  .centredivs {
    max-width: 80%;
    width: 80%;
    height: 80%;
    background: rgba(150, 100, 125, 0.2);
    border-radius: 10%;
    box-shadow: inset 0 0 10px rgba(225, 225, 255, 0.7);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .middledivs {
    max-height: 50%;
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  
  .deepestdivs {
    display: flex;
    justify-content: space-around;
    width: 80%;
    max-width: 80%;
  }
  
  
  /* first div css*/
  
  #start {
    border: 0.5px solid rgba(0, 0, 0, 0.5);
    display: flex;
  }
  
  .firstheadings {
    background: rgba(0, 0, 0, 0.05);
    color: rgb(225, 225, 225);
    width: 155px;
    cursor: pointer;
    text-align: center;
    text-justify: center;
  }
  
  .firstheadings:hover {
    box-shadow: 0px 0px 5px black;
  }
  
  
  /* above: first div css */
  
  
  /* second div css */
  
  #mainXOROdiv {
    border: 0.8px solid rgba(0, 0, 0, 0.7);
  }
  
  .xoro {
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 60px;
    color: rgba(100, 100, 100, 0.7);
    cursor: pointer;
  }
  
  .xoro:hover {
    font-size: 66px;
    color: rgba(100, 100, 100, 0.9)
  }
  
  
  /* above: 2nd div css */
  
  
  /* third div css */
  
  #playAreaMain {
    border: 1px solid black;
  }
  
  #innerplayarea {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .boxes:nth-child(1) {
    border-top-left-radius: 20%;
  }
  
  .boxes:nth-child(3) {
    border-top-right-radius: 20%;
  }
  
  .boxes:nth-child(7) {
    border-bottom-left-radius: 20%;
  }
  
  .boxes:nth-child(9) {
    border-bottom-right-radius: 20%;
  }
  
  .boxes {
    box-shadow: inset 0px 0px 5px rgba(225, 225, 225, 0.3);
    margin: 0;
    width: 33.2%;
    height: 32.8%;
    font-size: 500%;
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    font-family: "Comic Sans MS", cursive, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  
  /* above: 3rd div css */
  
  #app {
    width: 100vw;
    height: 100vh;
    background: rgba(100, 100, 100, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #horirow {
    width: 100%;
  }
  
  @media on screen (min-width: 400px) {
    #component {
      display: block;
      overflow: scroll;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js
  https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js
  &lt;div id="app" class="container"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>It is actually written using codepen.io.</p>
  <p>The problem is in the button on click event listener.</p>
  <pre><code>                &lt;button id={data} onClick={this.onClickEventsForBoxes} class=&quot;boxes&quot;&gt;&lt;/button&gt;
  
  </code></pre>
  <p>I want to execute this <strong>after</strong> I actually make the event happen.</p>
  <p>What it does it that it executes first and then it doesn't execute when I click the button again. It uses the previously executed draft.</p>
  <p>So basically I am trying to change this.state.turn value to player 1 and player 2 every time the button is clicked.</p>
  <pre><code> onClickEventsForBoxes=(e)=&gt;{
      if(e){
        var a = event.target;
        console.log(this.state.playerOne,this.state.playerTwo);
        console.log(this.state.turn);
        if(this.state.turn = 'one'){
          this.setState({turn:'two'});
          a.innerText = this.state.playerOne;
        } else {
          this.setState({turn:'one'});
          a.innerText = this.state.playerTwo;
        }
      }
    }
  </code></pre>
  <p>But only the first if block is being executed because the event handler is same for every button. Hence the value in state is being changed but it is not being reflected inside the code.</p>
  <p>This is the complete code.</p>
  <p>Thanks for the help</p>
  <pre><code>class App extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        playStyle: '',
        playerOne:'',
        playerTwo:'',
        turn: 'one',
      };
      this.moveToNextPage = this.moveToNextPage.bind(this);
      this.onClickEventsForFirstPage = this.onClickEventsForFirstPage.bind(this);
      this.onClickEventsForSecondPage = this.onClickEventsForSecondPage.bind(this);
    }
    //// It all starts from here !!!!!!!!!!!!!!!!!!!1
    componentDidMount(){
      document.getElementById('start').style.display= 'flex';
      document.querySelector('#mainXOROdiv').style.display = 'none';
      document.querySelector('#playAreaMain').style.display = 'none';
      this.onClickEventsForFirstPage();
      this.onClickEventsForSecondPage();
      this.onClickEventsForBoxes();
    }
    /// componentDidMount is above !!!!!!!!!!!!!!!!!!!!
    /* event handlers for first page */
    onClickEventsForFirstPage(){
      var single = document.getElementById('single');
      single.addEventListener('click',()=&gt;{
          this.moveToNextPage(document.querySelector('#mainXOROdiv'));
          this.setState({playStyle: 'single'});
      });
      var double = document.getElementById('double');
      double.addEventListener('click',()=&gt;{
          this.moveToNextPage(document.querySelector('#mainXOROdiv'));
          this.setState({ playStyle: 'double'});
      });
    }
    moveToNextPage(page){
      document.getElementById('start').style.display= 'none';
      document.querySelector('#mainXOROdiv').style.display = 'none';
      document.querySelector('#playAreaMain').style.display = 'none';
      page.style.display = 'flex';
    }
    /* event handler for first page above
    event handler for second page below */
    onClickEventsForSecondPage(){
      var X = document.querySelector('#xInSpan');
      var O = document.querySelector('#oInSpan');
      var clickedBtn = '';
      X.addEventListener('click',()=&gt;{
            this.moveToNextPage(document.querySelector('#playAreaMain'));
            this.setState({playerOne:'X',playerTwo:'O'})
      });
      O.addEventListener('click',()=&gt;{
            this.moveToNextPage(document.querySelector('#playAreaMain'));
            this.setState({playerOne:'O',playerTwo:'X'})
      });
    }
    /*event handler for second page above */
    onClickEventsForBoxes=(e)=&gt;{
      if(e){
        var a = event.target;
        console.log(this.state.playerOne,this.state.playerTwo);
        console.log(this.state.turn);
        if(this.state.turn = 'one'){
          this.setState({turn:'two'});
          a.innerText = this.state.playerOne;
        } else {
          this.setState({turn:'one'});
          a.innerText = this.state.playerTwo;
        }
      }
    }
    render(){
      return(
       &lt;div id=&quot;component&quot;&gt;
          &lt;div id=&quot;start&quot; class=&quot;centredivs&quot;&gt;
            &lt;div class=&quot;middledivs&quot;&gt;
              &lt;h2&gt;Choose game type&lt;/h2&gt;
              &lt;hr id=&quot;horirow&quot;/&gt;
              &lt;div class='deepestdivs'&gt;
                &lt;h3 id=&quot;single&quot; class=&quot;firstheadings&quot;&gt;SINGLE&lt;/h3&gt;
                &lt;h3 id=&quot;double&quot; class=&quot;firstheadings&quot;&gt;DOUBLE&lt;/h3&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id=&quot;mainXOROdiv&quot; class=&quot;centredivs&quot;&gt;
            &lt;div class=&quot;middledivs&quot;&gt; 
              &lt;h2&gt; Would you like to be an X or O&lt;/h2&gt;
              &lt;div class=&quot;deepestdivs&quot;&gt;
              &lt;span class=&quot;xoro&quot; id=&quot;xInSpan&quot;&gt;X&lt;/span&gt;&lt;span id=&quot;oInSpan&quot; class=&quot;xoro&quot;&gt;O&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id=&quot;playAreaMain&quot; class=&quot;centredivs&quot;&gt;
            &lt;div id='innerplayarea'&gt; 
              {
                [1,2,3,4,5,6,7,8,9].map(data=&gt;(
                  &lt;button id={data} onClick={this.onClickEventsForBoxes} class=&quot;boxes&quot;&gt;&lt;/button&gt;
                ))
              }
            &lt;/div&gt;
          &lt;/div&gt;  
       &lt;/div&gt;
      );
    }
  }  
  ReactDOM.render(&lt;App/&gt;,document.getElementById('app'));
  </code></pre>