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:

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

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>

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?

Does showHinter belong to React state? I do not see your setState within your code. — An Nguyen
– An Nguyen, Commented Sep 5, 2017 at 13:26
I made the same mistake at the beginning. Do every change with setState means put your showHinter as a state. this.setState({showHinter: false)} and then check with "this.state.showHinter &&" — Tiega
– Tiega, Commented Sep 5, 2017 at 13:27
@Tiega Ah yes, you've got it! Post this as an answer and I'll accept it. — JVG
– JVG, Commented Sep 5, 2017 at 13:37

Tiega · Accepted Answer · 2017-09-05 14:22:49Z

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>
}

Collectives™ on Stack Overflow

ReactJS variable change isn't rendering element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related