onClick not working reactjs in button despite binding

Question

I created a new component in my Reactjs code and have a button there with onClick function. But the onClick function does not work. I tried everything but it still does not work. Any ideas how I can go about solving this?

import React, { Component } from 'react';
import MenuIcon from '@material-ui/icons/Menu';

class HeaderComponent extends React.Component {
constructor(props){

    super(props);

    this.openMenuBar = this.openMenuBar.bind(this);
}

openMenuBar(){
    console.log("open");
}

render(){
    return(
        <div>
        <button onClick={() => { this.openMenuBar()}}>
                <MenuIcon/>
            </button>
        </div>
    );
}

}

This component is then called in the app.js

<HeaderComponent/>

UPDATE

Some helful info: Whenever I route it to a path (app/path/xx), then the button is not clickable. Otherwise, is it clickable (if the path is root)

You are mixing both sintaxes. Try onClick={() => this.clickHandler()} or onClick={() => {return this.clickHandler()}} or even onClick={this.clickHandler}. — Dupocas
– Dupocas, Commented Mar 18, 2019 at 18:57
I don't think the code posted by @Thanatos is wrong, because essentially he is declaring an anonymous arrow function, inside which he is referencing and calling openMenuBar. — Jibin Joseph
– Jibin Joseph, Commented Mar 18, 2019 at 19:03
I did everything mentioned in the first comment.. Still not working :/ — Thanatos
– Thanatos, Commented Mar 18, 2019 at 19:11

tam.dangc · Accepted Answer · 2019-03-18 19:28:12Z

1

The syntax should be

onClick={this.openMenuBar}

Or

onClick={() => { return this.openMenuBar()}}

Or

onClick={() => this.openMenuBar() }

class MenuIcon extends React.Component {
  render(){
    return <i className="fas fa-plus" />
  }
}
class HeaderComponent extends React.Component {
    constructor(props){
      super(props);
      this.openMenuBar = this.openMenuBar.bind(this);
    }
     
    openMenuBar(){
      console.log("open");
    }

    render(){
      return(
          <div>
            
            <button onClick={this.openMenuBar}> <MenuIcon /></button>
            <button onClick={() => this.openMenuBar()}> btn2</button>
            <button onClick={() => { return this.openMenuBar()}}> btn3</button>
            
          </div>
    );
}
}
ReactDOM.render(<HeaderComponent />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div id="root"></div>

edited Mar 18, 2019 at 19:28

answered Mar 18, 2019 at 18:56

tam.dangc

2,0621 gold badge20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Thanatos Over a year ago

tried this.. For some reason the button is not clickable no matter what.. Issue still remains..

tam.dangc Over a year ago

I updated the answer, that I can work. I think the problem is the <MenuIcon/>

tam.dangc Over a year ago

I added the <MenuIcon /> to test and don't see any issue. You can run my snippet.

Thanatos Over a year ago

This is irrespective of <MenuIcon> . Even after removing it I face the same issue. The button is not clickable no matter what.

Thanatos Over a year ago

I think I got a clue. Whenever I route it to a path (app/path/xx), then the button is not clickable. Otherwise, is it clickabe (if the path is root)

Yusuf Altıparmak · Accepted Answer · 2019-03-18 19:17:16Z

0

try

openmenubar = () => {

...

}

and

<button onClick = { () => this.openmenubar() } > </button>

answered Mar 18, 2019 at 19:17

Yusuf Altıparmak

4862 gold badges6 silver badges19 bronze badges

1 Comment

Yusuf Altıparmak Over a year ago

Can you try without binding function in constructor ? arrow function binds it automatically and can you try it without MenuIcon ?

Collectives™ on Stack Overflow

onClick not working reactjs in button despite binding

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related