Best practice for hiding menu programmatically?

First, great component! Question: I’m implementing a non-conventional way of hiding the menu whereby if the user taps on an element within the burger menu overlay, the menu hides. I’m able to successfully make this happen with the following lines of code:

        if(document.body.classList.contains('open-toc')){

            document.body.classList.remove('open-toc');

            let bmCrossButton = document.getElementsByClassName('bm-cross-button');
            let bmCrossButtonChildren = bmCrossButton[0].childNodes;
            let crossButton = bmCrossButtonChildren[ bmCrossButtonChildren.length - 1 ];
            crossButton.click();
        }
        else if( state && state.isOpen ) {
            document.body.classList.toggle('open-toc');
        }

I’m newer to React conventions, so I’m not sure using Javascript like this is a best practice, or if there might be a better way of implementing. Thanks in advance for the help, - B

[negomi]

Hey @briankuyath, thanks, glad you like the component!

The more React-y way to make components do things is to pass down data/instructions via their props (the isOpen prop is what you need in this case).

So to close the menu programmatically, you would need to store the menu state somewhere outside the component (the simplest place would be in a parent component’s state, so I’ll use that to demonstrate). Now you have control of that state (i.e. the menu is a ‘controlled component’), you can set it to whatever you want via other actions (e.g. a tap on your table of contents). Then all you have to do is pass that state down (via the isOpen prop), and the menu will open/close according to the state you pass.

The code would look something like this:

class ParentComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      menuOpen: false
    }
  }

  // This keeps your state in sync with the opening/closing of the menu
  // via the expected means, e.g. clicking the X, pressing the ESC key etc.
  handleStateChange (state) {
    this.setState({menuOpen: state.isOpen})  
  }

  // This callback function can be used to make
  // the menu close on any event you want
  closeMenu () {
    this.setState({menuOpen: false})
  }

  render () {
    return (
      <Menu isOpen={this.state.menuOpen} onStateChange={this.handleStateChange}>
        // Your component, doesn't matter where it is as long as you can pass
        // it a callback to be able to trigger the menu state change
        <TableOfContents onClick={() => this.closeMenu()} />
      </Menu>
    )
  }
}

Hope that helps 😃

[tyrong]

@negomi it was because I’m using next.js and on Ssr was causing the re render! Thanks for the reply though!