React onClick event is not firing on bootstrap dropdown menu

Question

I want to log the user out when I click on the "logout" element located inside the dropdown menu.

but the onClick event is not firing when I click on that.

this is the code

    <nav className="navbar navbar-expand-sm navbar-dark bg-dark mb-4">
    ...

      <ul className="navbar-nav ml-auto">
                <li className="nav-userdata dropdown" data-toggle="dropdown" role="button"
                    aria-haspopup="true" aria-expanded="false" >
                    <img src={user.avatar} className={"avatar"} alt={"user avatar"}
                        />
                    <div  className="dropdown-toggle" >{user.name}</div>
                        <ul className="dropdown-menu bg-dark">
                            <li><a href={"#"} onClick={() => console.log("logout")}>Logout</a></li>
                            <li><a href="#">Dashboard</a></li>
                        </ul>
                    <span className="caret"></span>
                </li>
            </ul>
    ...
      </nav>

there are no errors in console ,onClick work as intended when i add it outside the dropdown menu.

is there a way to make this work while using bootstrap dropdown menu?

check after remove href from tag, like console.log("logout")}> — Sagar, Oct 26 '19 at 09:25

score 1 · Answer 1 · answered Oct 26 '19 at 17:10

I managed to fix this issue by manually toggling the 'show' class in dropdown menu

const [isDropdownOpen,setDropdown] = useState(false);
const logout = () => {
        dispatch(logoutUser());
    };

 <nav className="navbar navbar-expand-sm navbar-dark bg-dark mb-4">
    ...

       <ul className="navbar-nav ml-auto" onClick={() => setDropdown(!isDropdownOpen)}>
            <li className="nav-userdata dropdown" >
                <img src={user.avatar} className={"avatar"} alt={"user avatar"}
                     title={"You must have a gravatar connected to display the avatar"}/>
                <div className={"dropdown-toggle"}>{user.name}</div>
                    <ul id={'dropdown-userdata'} className={classnames('dropdown-menu bg-dark dropdown-userdata', {'show': isDropdownOpen})}>
                        <li><a href={'#'} className='nav-link'  onClick={logout}>Logout</a></li>
                        <li><Link to={'/dashboard'} className={'nav-link'}>Dashboard</Link></li>
                    </ul>
                <span className="caret"></span>
            </li>
        </ul>
    ...
      </nav>

score 0 · Answer 2 · answered Oct 26 '19 at 09:37

0

While function call closing the anchor tag without and after that only the onclick functionality will work. I think every thing is fine with your work but the arrow symbol is overriding the anchor tag closing. So just check it will work fine

answered Oct 26 '19 at 09:37

peridin

28
3

I don't think that's the case here. onClick works if i place it outside the "dropdown-menu" – shashi srinath Oct 26 '19 at 09:53

score 0 · Answer 3 · answered Oct 26 '19 at 09:48

0

 You need e.preventDefault() in the click handler.

It's firing but the default behavior of an anchor is to refresh the page, so 
it's just rerendering immediately.

<li><a  onClick={(e) => this.logout(e)}>Logout</a></li>

logout =(e) =>{
  e.preventDefault()
  console.log('logout')
 }

try something like this,may it work

answered Oct 26 '19 at 09:48

Kishan Jaiswal

644
3
14

not working. behavior is the same regardless of the element I use (a, button . .....). but it's working if I place onClick outside the "dropdown-menu" – shashi srinath Oct 26 '19 at 09:56
whats your bootstrap version? – Kishan Jaiswal Oct 26 '19 at 09:57
i think you have not loaded js file for the bootstrap – Kishan Jaiswal Oct 26 '19 at 10:00
bootstrap 4.3.1 – shashi srinath Oct 26 '19 at 10:00
https://stackoverflow.com/questions/50980046/bootstrap-dropdown-not-working-in-react/50980203 check this link – Kishan Jaiswal Oct 26 '19 at 10:00
bootstrap is loaded properly. expand and collaps on dropdown menu is working. – shashi srinath Oct 26 '19 at 10:02

React onClick event is not firing on bootstrap dropdown menu

3 Answers3