ReactJS onClick not firing

react function component onclick not working
react onclick not working ie11
react onclick not working on mobile
react onclick missing
react map onclick not firing
onclick function not being called react
react events not firing
react not rendering onclick

I have:

...

setActive(section) {
        this.setState({
            currentSection: section
        });
        console.log('Current view is'+this.state.currentSection);
    }

    render() {
        return <div>
            <div className="section">
                <HeaderButton active text="test1" count={23} backgoundColor={'#c04c36'} onClick={() => this.setActive.bind('test1')}/>
            </div>
            <div className="section">
                <HeaderButton text="test2" count={45} backgoundColor={'#ffe698'} onClick={() => this.setActive.bind('test2')}/>
            </div>
            <div className="section">
                <HeaderButton text="test3" count={4} backgoundColor={'#198a75'} onClick={() => this.setActive.bind('test3')}/>
            </div>
        </div>
    }

But when I click on those component nothing at all happens. What am I doing wrong?

Avoid calling .bind() in the onclick handler itself. Instead, you can call setActive() directly via the this variable seeing that the context of the arrow function is that of your component:

render() {
    return <div>
        <div className="section">
            <HeaderButton active text="test1" count={23} 
                          backgoundColor={'#c04c36'} 
                          onClick={() => this.setActive('test1')}/>
        </div>
        <div className="section">
            <HeaderButton text="test2" count={45} 
                          backgoundColor={'#ffe698'} 
                          onClick={() => this.setActive('test2')}/>
        </div>
        <div className="section">
            <HeaderButton text="test3" count={4} 
                          backgoundColor={'#198a75'} 
                          onClick={() => this.setActive('test3')}/>
        </div>
    </div>
}

Alternatively, to optimize your render() method, you could create pre-bound function instances to avoid use of arrow functions in your render method:

constructor(props) {
 super(props);

 /* Bind setActive to this component/class instance */
 this.setActiveTest1 = this.setActive.bind(this, 'test1')
 this.setActiveTest2 = this.setActive.bind(this, 'test2')
 this.setActiveTest3 = this.setActive.bind(this, 'test3')
}

setActive(section) {
    this.setState({
        currentSection: section
    });
    console.log('Current view is'+this.state.currentSection);
}

render() {
    return <div>
        <div className="section">
            <HeaderButton active text="test1" count={23} 
                          backgoundColor={'#c04c36'} 
                          onClick={this.setActiveTest1 }/>
        </div>
        <div className="section">
            <HeaderButton text="test2" count={45} 
                          backgoundColor={'#ffe698'} 
                          onClick={this.setActiveTest2}/>
        </div>
        <div className="section">
            <HeaderButton text="test3" count={4} 
                          backgoundColor={'#198a75'} 
                          onClick={this.setActiveTest3}/>
        </div>
    </div>
}

onClick not firing · Issue #16093 · facebook/react · GitHub, I can't seem to get the onClick event to fire at all. I've reduced my app to the following file: index.js: import React from 'react' import { render }  onClick not firing #16093. Closed jstierney opened this issue Jul 9, 2019 · 3 comments Closed onClick not firing #16093. jstierney opened this issue Jul 9, 2019 · 3

The problem is that you are both using the arrow function, and binding as well. You are also not binding to an execution context.

This is a confusing concept.

When you call an onClick without an arrow function, you need to bind it.

Thus, a call like this...

onClick = {this.setActive.bind(this)}

Needs to be called or else this.setActive will lose its binding. It is bound to the execution context that you would like it to run in, in this case that being this

An ES6 arrow function is lexically bound and does not need to be bound to an execution context.

thus, you can have...

onclick ={() => this.setActive()}

Which will automatically run in the context where it is written, thus not needing the binding.

Also, you are binding to a string instead of an execution context (usually a component).

Take out the bind and your function should run.

React - onClick method not firing, I have an "export default" statement in addition to "class LikeButton" export default class AppHeader extends React.Component { constructor()  Ensuring that the click event is actually reachable from an iOS device. As the stack overflow link points out, this is also an issue for <label> elements associated with <input> elements. In order to behave as a clickable label, they must also include an empty "onclick" attribute.

You should bind your events in constructor but not in attribute itself.

[solved] React `onClick` not firing up - Programming Help, struggling to make my button onClick fire up (React) I'd very much welcome a look into my code and pointers on why onClick is not firing up. The button inside the React component has an onClick event handler attached to it, pointing to our sayHello() function. Doing so will trigger the function every time you click the button. Doing so will trigger the function every time you click the button.

Why is my onClick not working? : reactjs, Unless SomeComponent is a button or something you're basically just passing a prop called onClick here. < button onClick = {activateLasers} > Activate Lasers </ button > Another difference is that you cannot return false to prevent default behavior in React. You must call preventDefault explicitly.

OnClick not firing on functional component in Router, OnClick not firing on functional component in Router - reactjs. I'm new to React JS and I have some trouble with an onClick event. I tried multiple things but as  ReactJS: onClick handler not firing when placed on a child component 2 answers ; I have a pretty simple React component where I pass the callback for the onClick event to a child element; however, the onClick event does not seem to ever fire.

React onClick Event Handling (With Examples), We do not want to execute a function inside of the event handler. ✅ Good. <​button onClick={sayHello}>  Finally, we have completed React onClick Event Handling tutorial with multiple examples. In this tutorial we barely scratched the surface about React onClick event handler. I am sure there are various ways where you can use onClick event to make any kind of event handling task. I hope you loved this tutorial.

Comments
  • The second method gives me Uncaught TypeError: Cannot read property 'setActive' of undefined
  • @imperium2335 opps - small typo, just updated answer. Does that help?
  • Thanks it's no longer erroring but it isn't doing anything at all.
  • Ok I had to put onClick={this.props.onClick} in my HeaderButton component, seems to work now.
  • @imperium2335 nice! Glad I could help :-)