How to detect time without clicking on an element in react

Question

I have a navigation menu with 3 levels. I would like to know how it can be detected if more than 1 minute has passed without the user clicking on any of the elements (parents and children). When I spent 1 minute I would change showdesplegar: false. Does anyone know how it could be done? I have no idea This is my original Nav code:

class Nav extends Component {
    constructor(props){
        super(props);

        ["desplegarClick",].forEach((method) => {
            this[method] = this[method].bind(this);
        });

        this.state = {
            addClassMenu: false, 
            addClassNav: false,
            showtabs: this.props.showtabs
        }
    }

    showHideSubmenu(index){
        this.setState({
            showfstmenu: index,
            showdesplegar: true,
        });
    }

    desplegarClick(){
        this.setState({
            showfstmenu: false,
            showdesplegar: false,
        });
    }

    render(){
        const renderMenu = items => {
            return (
                <ul className="list">
                    {items.map((i, index) => {
                        var icoJson;
                        if(i.ico){
                            icoJson = <Icon icon={i.ico} className={"ico-" + i.ico} />;
                        }
                        var firstMenu = i.fstmenu ? "first-menu" : "";
                        var secondMenu = i.sndtitle ? "second-menu" : "";
                        var thirdMenu = i.trdtitle ? "third-menu" : "";
                        var classMn = i.fsttitle ? `mn-${i.fsttitle}` : "";
                        var classSb = i.sndtitle ? `sb-${i.sndtitle}` : "";
                        var classTm = i.trdtitle ? `tr-${i.trdtitle}`.replace(/ /g, "") : "";
                        return (
                            <React.Fragment key={'fragment'+ i.fsttitle + i.sndtitle + i.trdtitle}>
                                <li className={`list__item ${firstMenu}${secondMenu}${thirdMenu}`} key={i.fsttitle + i.sndtitle + i.trdtitle}>
                                    <a 
                                        href={i.URL} 
                                        className={`${classMn}${classSb}${classTm}` + (this.state.showfstmenu === i.fsttitle ? ' active' : '')}
                                        onClick={(e) => i.fstmenu ? this.showHideSubmenu(i.fsttitle) : null || i.trdtitle ? this.props.openTabs(e, i.URL, i.Iframe, i.trdtitle) : null }>
                                            {icoJson}
                                            <span>{i.fsttitle}{i.sndtitle}{i.trdtitle}</span>
                                    </a>
                                    {i.menu && renderMenu(i.menu)}
                                    {this.state.showfstmenu === i.fsttitle && (
                                        <>{i.fstmenu && renderMenu(i.fstmenu)}</>
                                    )}
                                    {i.sndmenu && renderMenu(i.sndmenu)}
                                </li>
                                {( this.state.showdesplegar) && (i.sndmenu) && (
                                    <div key={"key"+index} className="content-bnt">
                                        <button key={"ds"+index} id="desplegar" className="btn btn--rounded" onClick={this.desplegarClick}>
                                            <Icon key={"arr"+index} icon="flecha" className="ico-flecha"/>
                                            <Icon key={"fc"+index} icon="flecha" className="ico-flecha"/>
                                        </button>
                                    </div>
                                )}
                            </React.Fragment>
                        )
                    })}
                </ul>
            )
        }
        return (
            <nav className={"nav" +( this.state.showdesplegar ? ' max-width' : '')}>
                <div className="menu">
                    {renderMenu(this.props.navigation.menu)}
                </div>
            </nav>
        )
    }
}

Answer 1

You can use setTimeout() which executes logic after a certain period of time. We can use it in combination with componentDidUpdate(). We will check if the menu is open, in other words when showdesplegar: true and set it to false after a minute. Additionally, we need to bind a timer variable to set and clear the timer when the state changes, we call it this.timer

See sandbox for reference: https://codesandbox.io/s/sharp-sutherland-07d24

class Nav extends Component {
    constructor(props){
        super(props);

        ["desplegarClick",].forEach((method) => {
            this[method] = this[method].bind(this);
        });

        this.state = {
            addClassMenu: false, 
            addClassNav: false,
            showtabs: this.props.showtabs
        }

        this.timer = null
    }

  componentDidUpdate() {
     if (this.state.showdesplegar) {
         this.timer = setTimeout(() => {
            this.setState({
               display: false
            });
         }, 60000);
      } else {
          clearTimeout(this.timer);
      }
  }

    showHideSubmenu(index){
        this.setState({
            showfstmenu: index,
            showdesplegar: true,
        });
    }

    desplegarClick(){
        this.setState({
            showfstmenu: false,
            showdesplegar: false,
        });
    }

    render(){
        const renderMenu = items => {
            return (
                <ul className="list">
                    {items.map((i, index) => {
                        var icoJson;
                        if(i.ico){
                            icoJson = <Icon icon={i.ico} className={"ico-" + i.ico} />;
                        }
                        var firstMenu = i.fstmenu ? "first-menu" : "";
                        var secondMenu = i.sndtitle ? "second-menu" : "";
                        var thirdMenu = i.trdtitle ? "third-menu" : "";
                        var classMn = i.fsttitle ? `mn-${i.fsttitle}` : "";
                        var classSb = i.sndtitle ? `sb-${i.sndtitle}` : "";
                        var classTm = i.trdtitle ? `tr-${i.trdtitle}`.replace(/ /g, "") : "";
                        return (
                            <React.Fragment key={'fragment'+ i.fsttitle + i.sndtitle + i.trdtitle}>
                                <li className={`list__item ${firstMenu}${secondMenu}${thirdMenu}`} key={i.fsttitle + i.sndtitle + i.trdtitle}>
                                    <a 
                                        href={i.URL} 
                                        className={`${classMn}${classSb}${classTm}` + (this.state.showfstmenu === i.fsttitle ? ' active' : '')}
                                        onClick={(e) => i.fstmenu ? this.showHideSubmenu(i.fsttitle) : null || i.trdtitle ? this.props.openTabs(e, i.URL, i.Iframe, i.trdtitle) : null }>
                                            {icoJson}
                                            <span>{i.fsttitle}{i.sndtitle}{i.trdtitle}</span>
                                    </a>
                                    {i.menu && renderMenu(i.menu)}
                                    {this.state.showfstmenu === i.fsttitle && (
                                        <>{i.fstmenu && renderMenu(i.fstmenu)}</>
                                    )}
                                    {i.sndmenu && renderMenu(i.sndmenu)}
                                </li>
                                {( this.state.showdesplegar) && (i.sndmenu) && (
                                    <div key={"key"+index} className="content-bnt">
                                        <button key={"ds"+index} id="desplegar" className="btn btn--rounded" onClick={this.desplegarClick}>
                                            <Icon key={"arr"+index} icon="flecha" className="ico-flecha"/>
                                            <Icon key={"fc"+index} icon="flecha" className="ico-flecha"/>
                                        </button>
                                    </div>
                                )}
                            </React.Fragment>
                        )
                    })}
                </ul>
            )
        }
        return (
            <nav className={"nav" +( this.state.showdesplegar ? ' max-width' : '')}>
                <div className="menu">
                    {renderMenu(this.props.navigation.menu)}
                </div>
            </nav>
        )
    }
}