ReactJS variable change isn't rendering element

Question

I have a fairly simple situation (I'm using ReactJS with A-Frame / A-Frame React, but that shouldn't really affect anything here).

I have an entity that hints to a user that they can click / swipe an object. I want that entity to disappear after the user has clicked on said object, and then reappear after 10 seconds.

I'm relatively new to React so may be doing something wrong here:

1. At the top of my JS file (after my imports, but before the class begins, I'm doing let showHinter = true;

2. I've got an entity in my render() method like this:

   <AFrameEntity
       events={{
         click: (ev) => {
   
           showHinter = false;
   
           setTimeout(() => {
             console.log("showHinter Value:", showHinter)
   
             /* ↑ This fires, but ↓ this doesn't do anything */
   
             showHinter = true;
             console.log("showHinter Value:", showHinter)
           }, 5000)
   
         }
       }}
     >
     </AFrameEntity>
   

3. My "hinter" component is a sibling to that, like so:

   {
   
     <AFrameEntity /* Bunch of irrelevant stuff here */ >
   
       // fade out
       {
        !showHinter && 
         <a-animation 
           attribute="material.opacity"
           dur="1000"
           fill="forwards"
           from="1"
           to="0"
           repeat="0"></a-animation>
       }
         //fade in
       {
        showHinter && 
         <a-animation 
           attribute="material.opacity"
           dur="1000"
           fill="forwards"
           from="0"
           to="1"
           repeat="0"></a-animation>
       }
     </AFrameEntity>
   }
   

When clicking, showHinter is correctly set to false and the element disappears. However, it never re-appears. My console logs do happen, and showHinter === false, yet my fade-in animation never happens, and inspecting the element with react's devtools shows my fade-out animation entity, and NOT my fade-in one (which should be triggered when showHinter === true.

So the basic question is, why isn't React react-ing to my variable change? Do I need to force it to re-render somehow?

Answer 1

You should do every change, that effect the view or where you expect a re-render, via state.

In your case you do something like(not tested):

<AFrameEntity
events={{
  click: (ev) => {

    this.setState({showHinter: false)};

    setTimeout(() => {
      console.log("showHinter Value:", this.state.showHinter)

      /* ↑ This fires, but ↓ this doesn't do anything */

      this.setState({showHinter: true)};
      console.log("showHinter Value:", this.state.showHinter)
    }, 5000)

  }
}}

And check the state in your render function.

{

  <AFrameEntity /* Bunch of irrelevant stuff here */ >

    // fade out
    {
     !this.state.showHinter && 
      <a-animation 
        attribute="material.opacity"
        dur="1000"
        fill="forwards"
        from="1"
        to="0"
        repeat="0"></a-animation>
    }
      //fade in
    {
     this.state.showHinter && 
      <a-animation 
        attribute="material.opacity"
        dur="1000"
        fill="forwards"
        from="0"
        to="1"
        repeat="0"></a-animation>
    }
  </AFrameEntity>
}