title: Stale props inside a method of a class-based component
body: <p>This is a spelling game. The user drags the correct letter over the dropzone. On drop, the function <strong>checkIfLetterIsCorrect</strong> is invoked and runs the checking process. When all dropzones are filled with the correct letter the app moves on to the next word and props and state or in sync.</p>
  <p>This all works fine on a hard refresh. However, this component is inside a Semantic UI React modal, and when the modal is closed and reopened, and I set the game back up <strong>this.props.currentWordLetters</strong> is the correct value, but  when <strong>checkIfLetterIsCorrect</strong> is invoked, the value of <strong>this.props.currentWordLetters</strong> inside this method is of the value before the modal was closed. I checked with a console.log inside <strong>ComponentWillUnmount</strong> and the component is indeed unmounting when the modal is closed, so I don't see why the values inside <strong>checkIfLetterIsCorrect</strong> would be outdated as everything should be rendered like new. If somebody could point me in the right direction it would be a big help. Thank you.</p>
  <pre><code>class DropzoneContainer extends React.Component {
      constructor() {
          super();
          this.state = {
              correctCounter: 0,
          };
      }
  
      componentWillUnmount(){
          console.log('unMounted')
      }
  
      checkIfLetterIsCorrect(e) {
          
          for (let i = 0; i &lt; this.props.currentWordLetters.length; i++) {
              console.log(this.props.currentWordLetters, this.state.letters);
              if (
                  this.props.currentWordLetters[i] ===
                      e.relatedTarget.innerText &amp;&amp;
                  e.relatedTarget.innerText === e.target.innerText
              ) {
                  e.relatedTarget.classList.remove('draggable');
                  this.props.onCorrectLetter();
          
  
                  this.setState({
                      correctCounter: this.state.correctCounter + 1,
                  });
                  if (this.state.correctCounter === this.props.currentWordLetters.length) {
                      this.setState({ correctCounter: 0 })
                      clearInterval(this.props.timer.current);
                      this.props.onTimerStop();
  
                      this.props.onRoundComplete();
                      return;
                  }
              }
          }
      }
  //...
  </code></pre>
  <p>Here is the entire component:</p>
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import interact from 'interactjs';
  import { Grid } from 'semantic-ui-react';
  import Dropzone from '../dropzone/dropzone.component'
  
  import {
      onCorrectLetter,
      onRoundComplete,
      onTimerStop,
  } from '../../../../actions/phonicsGameActions';
  
  class DropzoneContainer extends React.Component {
      constructor() {
          super();
          this.state = {
              correctCounter: 0,
          };
      }
  
      componentWillUnmount(){
          console.log('unMounted')
      }
  
      checkIfLetterIsCorrect(e) {
          
          for (let i = 0; i &lt; this.props.currentWordLetters.length; i++) {
              console.log(this.props.currentWordLetters, this.state.letters);
              if (
                  this.props.currentWordLetters[i] ===
                      e.relatedTarget.innerText &amp;&amp;
                  e.relatedTarget.innerText === e.target.innerText
              ) {
                  e.relatedTarget.classList.remove('draggable');
                  this.props.onCorrectLetter();
          
  
                  this.setState({
                      correctCounter: this.state.correctCounter + 1,
                  });
                  if (this.state.correctCounter === this.props.currentWordLetters.length) {
                      this.setState({ correctCounter: 0 })
                      clearInterval(this.props.timer.current);
                      this.props.onTimerStop();
  
                      this.props.onRoundComplete();
                      return;
                  }
              }
          }
      }
  
      componentDidMount() {
  
          console.log(&quot;component mountedw &quot; + this.props.currentWordLetters)
          // enable draggables to be dropped into this
  interact(&quot;.inner-dropzone&quot;).dropzone({
      // only accept elements matching this CSS selector
      accept: &quot;.draggable&quot;,
      // Require a 75% element overlap for a drop to be possible
      overlap: 0.75,
   
      // listen for drop related events:
   
      ondropactivate: function (event) {
        // add active dropzone feedback
        event.target.classList.add(&quot;drop-active&quot;);
      },
      ondragenter: function (event) {
        var draggableElement = event.relatedTarget;
        var dropzoneElement = event.target;
   
        // feedback the possibility of a drop
        dropzoneElement.classList.add(&quot;drop-target&quot;);
        draggableElement.classList.add(&quot;can-drop&quot;);
        //draggableElement.textContent = 'Dragged in'
      },
      ondragleave: function (event) {
        // remove the drop feedback style
   
        event.target.classList.remove(&quot;correct&quot;);
        event.target.classList.remove(&quot;incorrect&quot;);
        event.target.classList.remove(&quot;drop-target&quot;);
        event.relatedTarget.classList.remove(&quot;can-drop&quot;);
        event.target.classList.remove(&quot;test&quot;);
        //event.relatedTarget.textContent = 'Dragged out'
      },
      ondrop:  (event)=&gt; {
        event.stopImmediatePropagation();
        this.checkIfLetterIsCorrect(event)
   
   
      },
    
      ondropdeactivate: function (event) {
        // remove active dropzone feedback
        event.target.classList.remove(&quot;drop-active&quot;);
        event.target.classList.remove(&quot;drop-target&quot;);
        event.target.classList.remove(&quot;drop-target&quot;);
      },
   })
      }
  
  
      render() {
      
          return (
              &lt;Grid&gt;
                  &lt;Grid.Row style={{ justifyContent: 'space-evenly' }}&gt;
                      {this.props.currentWordLetters.length &gt; 1
                          ? this.props.currentWordLetters.map((zone) =&gt; (
                                  &lt;Dropzone
                                      key={zone}
                                      letter={zone}
                                      style={{
                                          color: 'rgba(0,0,0,0)',
                                          width: '55px',
                                          height: '55px',
                                          border: 'dotted white 2px',
                                      }}
                                      className=&quot;inner-dropzone&quot;
                                  /&gt;
                            ))
                          : 'Loading Dropzone...'}
                  &lt;/Grid.Row&gt;
              &lt;/Grid&gt;
          );
      }
  }
  
  
  
  const mapDispatchToProps = (dispatch) =&gt; ({
      onRoundComplete: () =&gt; dispatch(onRoundComplete()),
      onCorrectLetter: () =&gt; dispatch(onCorrectLetter()),
      onTimerStop: () =&gt; dispatch(onTimerStop()),
  });
  
  const mapStateToProps = (state) =&gt; ({
      currentWordLetters: state.phonicsGameReducer.currentWordLetters,
  });
  
  export default connect(mapStateToProps, mapDispatchToProps)(DropzoneContainer);
  </code></pre>