React unable to access DOM via "this.setState"?

Tell us what’s happening:
Currently working on the 25+5 clock project and I’ve run into an odd issue. Right now, I’m trying to use a function to start/stop my timer and to update my timer’s state based on whether you are pausing or playing. However, trying to use this.setState(…) I am getting an error:
“Uncaught TypeError occurs (Uncaught TypeError: Cannot read property ‘__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED’ of undefined)”

I found a bit of information on the error here,

and am fairly certain that my this.setState isn’t actually using the DOM that my application is running off of, but the part I’m struggling with is why? I tried adding the script mentioned in the article but had no success. I’m thinking I’m overlooking something obvious.

This is the current function,

countDown() {
    var unpause = new Date().getTime();
    console.log("state on click: " + this.state.timerOn);
    var opposite = !this.state.timerOn;
    console.log("oppsite: " + opposite);
    
    this.setState({
      timerOn: opposite
    })
    
    console.log("state before if statement: " + this.state.timerOn);
    
    if(this.state.timerOn) {
      //countdown code
      
    } else {
      //pause code
    }
  }

This is the rest of the codepen: https://codepen.io/tmcg1998/pen/MWEmwYv

Challenge: Build a 25 + 5 Clock

Link to the challenge:

If I understood you correctly. In order to change this.state with reference to the previous state, we have to use a callback, e.g.: (taken from one of the FCC curriculum)

  handleEnter() {
    this.setState((state) => ({
      message: state.message + 'You pressed the enter key! '
    }));
}

to change the state instead of changing it directly, e.g.:

this.setState({
      timerOn: opposite
    })

We can change this.state without callback only if our change (the new state) does not care what the previous state is.

I’m not sure if this is related or not to the error as I did not look at your code, nor see the error you said in the FCC test specs.

And, just in case, React works with virtual DOM instead of real DOM. We are changing the virtual DOM in this.state, and React will automatically change the real DOM to mirror the virtual DOM in this.state.

I see 2 errors in your code.

  1. Uncaught Error: Minified React error #227;
  2. Uncaught TypeError: Cannot read properties of undefined (reading ‘__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED’)

To resolve 1st error just remove react-dom from the external script(from JS settings)

The second error is caused by react-bootstrap CDN. You may remove this if you are not using it. I didn’t see any impact on the UI front after removing it probably because you already have the regular bootstrap.

https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/2.0.3/react-bootstrap.min.js

Hope this helps