ReactJS button loses its functionality when I resize the window

Question

This is the header.component.js file. It renders the header of the component in my react app. I'm trying to make the fontAwesome Icon that contains the "faBars" property:

 <Row onClick={onToggleMenu}>
        <Col>
          <FontAwesomeIcon
            icon={faBars}
            size="2x"
          />
        </Col>
      </Row>

open and close the sidebar even when the window gets resized. The problem that I'm having is that although the icon is responsive, it loses its functionality as soon as the window resizes.

This is the entire component:

import React  from 'react';

import clsx from 'clsx';

import { connect } from 'react-redux';

import { setSidebarToggleMobile } from '../redux/reducers/theme.reducer';

import HeaderUserbox from '../components/header-user-box.component';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { faBell } from '@fortawesome/free-regular-svg-icons';

import { faBars } from '@fortawesome/free-solid-svg-icons';

import { Badge, Row, Col } from 'reactstrap';


// import redux and reducers
import store from "../redux/store"
import { SET_SIDEBAR_TOGGLE } from "../redux/reducers/theme.reducer"

const Header = (props) => {

  const { headerShadow, headerBgTransparent } = props;


  /** Metodo que ejecuta el toggle del sideber*/
  const onToggleMenu = () => {
    const isActive = store.getState().sidebar.sidebarToggle;
    console.log("isActive: " + isActive);
  
    //Original statement:
    store.dispatch({ type: SET_SIDEBAR_TOGGLE, sidebarToggle: !isActive });
    //console.log("Store.dispatch: " , store.dispatch({ type: SET_SIDEBAR_TOGGLE, sidebarToggle: !isActive }));
  }


  return (
    <>
      <div
        className={clsx('app-header', {
          'app-header--shadow': headerShadow,
          'app-header--opacity-bg': headerBgTransparent
        })}>          

            <Row onClick={onToggleMenu}>
              <Col>
                <FontAwesomeIcon
                  icon={faBars}
                  size="2x"
                />
              </Col>
            </Row>

        <div className="app-header--pane"></div>
        <div className="app-header--pane">        
          <aside className="position-relative" style={{ marginLeft: '-20%' }}>
            <Badge
              color='success'
              pill
              style={{
                zIndex: 1,
                borderRadius: '8px',
                height: '12px',
                width: '5px',
                padding: '6px',
                marginBottom: '40px',
                marginRight: '-14px',
                border: '1px solid white',
                boxShadow: '2.5px 2px'
              }}
            >
              {' '}
            </Badge>
          </aside>
          <FontAwesomeIcon
            icon={faBell}
            size='4x'
            style={
              {
                borderRadius: '8px',
                zIndex: -1,
                padding: '5%',
                margin: '3%',
                width: '50px',
                backgroundColor: '#d1ffd5',
                color: '#03ac13'
              }}
          />
          <HeaderUserbox />
        </div>
      </div>
    </>
  );
};

const mapStateToProps = (state) => ({
  headerShadow: state.sidebar.headerShadow,
  headerBgTransparent: state.sidebar.headerBgTransparent,
  sidebarToggleMobile: state.sidebar.sidebarToggleMobile
});

const mapDispatchToProps = (dispatch) => ({
  setSidebarToggleMobile: (enable) => dispatch(setSidebarToggleMobile(enable))
});

export default connect(mapStateToProps, mapDispatchToProps)(Header);

Answer 1

Hello try to prevent the default event sometimes it's fixe

 const onToggleMenu = (event) => { event.preventDefault(); const isActive = store.getState().sidebar.sidebarToggle; console.log("isActive: " + isActive); //Original statement: store.dispatch({ type: SET_SIDEBAR_TOGGLE, sidebarToggle: ;isActive }). //console.log("Store:dispatch, ". store:dispatch({ type, SET_SIDEBAR_TOGGLE: sidebarToggle; !isActive })); }

and you can invoke your function

 <Row onClick={(e)=>onToggleMenu(e)}>