React - will not re render on state change

Question

I'm all new to react. Why does my page not re render on mouse over and mouse out when my state changes? If I look at console.log, I can see the state changes. But I can't get this to work. Here is my code:

export default class Nav extends React.PureComponent {

  constructor(props) {
    super(props);
    this.navLevelOneId = '';

    this.state = {
      showSubMenu: []
    };
  }

  // Mouse over function
  handleHover = (id,event) => {
    let showSubMenu=this.state.showSubMenu;
    showSubMenu[id]=!showSubMenu[id]
    this.setState({showSubMenu: showSubMenu}, () => {
      console.log(this.state.showSubMenu);  
    });
  }

  render() {

    return (

          <div ref="megaMenu" className="navbar navbar-default navbar-static-top">
            <div className="container">
              <div className="navbar-header">
                <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  <span className="icon-bar"></span>
                  <span className="icon-bar"></span>
                  <span className="icon-bar"></span>
                </button>
              </div>
              <div className="navbar-collapse collapse">
                      <ul className="nav navbar-nav">
                        <li onMouseOver={this.handleHover.bind(this,0)} onMouseOut={this.handleHover.bind(this,0)}>
                                  <a>Home</a>
                                </li>
                        <li className="dropdown menu-large" onMouseOver={this.handleHover.bind(this,1)} onMouseOut={this.handleHover.bind(this,1)}>
                    <a className="dropdown-toggle" data-toggle="dropdown">Product Listing</a>

                                    <ul className={"dropdown-menu megamenu row " + this.state.showSubMenu[1]}>
                      <li>
                        <div className="col-sm-6 col-md-3">
                          <a href="" className="thumbnail">
                                  <img src="http://placehold.it/150x120" alt="test" />
                          </a>
                        </div>
                        <div className="col-sm-6 col-md-3">
                              <a href="" className="thumbnail">
                                  <img src="http://placehold.it/150x120" alt="test" />
                          </a>
                        </div>
                        <div className="col-sm-6 col-md-3">
                              <a href="" className="thumbnail">
                                  <img src="http://placehold.it/150x120" alt="test" />
                          </a>
                        </div>
                        <div className="col-sm-6 col-md-3">
                          <a href="" className="thumbnail">
                                  <img src="http://placehold.it/150x120" alt="test" />
                          </a>
                          </div>
                              </li>
                    </ul>

                  </li>

                        <li className="dropdown menu-large" onMouseOver={this.handleHover.bind(this,2)} onMouseOut={this.handleHover.bind(this,2)}>
                            <a className="dropdown-toggle" data-toggle="dropdown">Categories</a>

                                    <ul className={"dropdown-menu megamenu row " + this.state.showSubMenu[2]}>
                      <li>
                        <div className="col-sm-6 col-md-3">
                          <a href="" className="thumbnail">
                                  <img src="http://placehold.it/150x120" alt="test" />
                          </a>
                        </div>
                        <div className="col-sm-6 col-md-3">
                              <a href="" className="thumbnail">
                                  <img src="http://placehold.it/150x120" alt="test" />
                          </a>
                        </div>
                        <div className="col-sm-6 col-md-3">
                              <a href="" className="thumbnail">
                                  <img src="http://placehold.it/150x120" alt="test" />
                          </a>
                        </div>
                        <div className="col-sm-6 col-md-3">
                          <a href="" className="thumbnail">
                                  <img src="http://placehold.it/150x120" alt="test" />
                          </a>
                          </div>
                              </li>
                    </ul>

                        </li>
                  </ul>
                  </div>
            </div>
          </div>


            );

      }

    }

Have you tried passing a callback to these events? `() => this.handleHover` instead? Also, I am not sure if you want to bind handleHover because it is an arrow function and arrow functions have no idea of an `Object` and keyword `this` — Siya Mzam, Jun 20 '18 at 12:36

score 5 · Accepted Answer · answered Jun 20 '18 at 12:39

Check out the difference between using Component and PureComponent.

Briefly, PureComponent performs a shallow comparison on state change. That means that it compares only references for state objects and arrays (in your case this.state.showSubMenu is an array and it's reference doesn't change so React won't force a rerender there)

React - will not re render on state change

1 Answers1

Linked