React Hook Toggle class on window resize-CodePudding

I'm trying to build a simple mobile menu with an event listener that would remove the toggle class 'is-open' whenever the window resizes (on the body, button and menu). Not too confident about the syntax, the toggle seems to work but i can't seem to put the pieces together. Any help would be very kindly appreciated!

import React, {useState, useEffect} from 'react';

function NavigationMobile() {

  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);
  const [isMobile, setIsMobile] = useState(window.innerWidth < 991);

  useEffect(() => {
    document.body.classList.toggle('is-open', isOpen);
  },[isOpen])

  useEffect(() => {
    window.addEventListener("resize", () => {
      const ismobile = window.innerWidth < 991;
      if (ismobile !== isMobile) setIsMobile(ismobile);
    }, false);
  }, [isMobile]);

  return (
    <Wrapper>

      <button className={`nav-link btn-icon menu ${isOpen ? 'is-open' : ''}`} onClick= {toggle} aria-label="Open Menu">
      </button>

      <div className={`mobile-menu ${isOpen ? 'is-open' : ''}`}>

        <div className="mobile-menu-inner">
       
        </div>

      </div>

    </Wrapper>
  )
}

export default NavigationMobile;

CodePudding user response：

Frosty is correct, this works though:

import React, { Fragment, useState, useEffect } from 'react';

const NavigationMobile = () => {
    const [isOpen, setIsOpen] = useState(false);
    const toggle = () => setIsOpen(!isOpen);
    const [isMobile, setIsMobile] = useState(false);
    useEffect(() => {
        window.addEventListener('resize', () => {
            if (window.innerWidth < 991) {
                setIsMobile(true);
            } else {
                setIsMobile(false);
            }
            console.log(window.innerWidth);
        });
    }, []);

    return (
        <Fragment>
            <button
                className={`nav-link btn-icon menu ${isOpen ? 'is-open' : ''}`}
                onClick={toggle}
            />

            <div className={`mobile-menu ${isOpen ? 'is-open' : ''}`}>
                <div className='mobile-menu-inner' />
            </div>

            {!isMobile && <h1>Not Mobile</h1>}
            {isMobile && <h1>Is Mobile</h1>}
        </Fragment>
    );
};

export default NavigationMobile;