onclick not firing in react

Question

I am very new to react and I stuck on some idea. The problem I have is that onclick is not firing up.

class Application extends React.Component{
    render () {
        return (
            <div>
                <button onClick={alert("hello world")}>Hello Application</button>
            </div>
        )
    }  
}

ReactDOM.render(<Application />,document.getElementById("tar"));

I am expecting when the button is clicked, alert saying hello world will be show up. However, that is not happening! Why is that?

Kyle Richardson · Accepted Answer · 2017-07-21 21:30:20Z

5

You are invoking the alert() when assigning it to the onClick event of the button.

Try wrapping it in an es6 arrow function.

<button onClick={() => { alert("hello world")} }>Hello Application</button>

Or better still.. make it a method on the component that you pass as the handler to the button like this:

class Application extends React.Component {
    constructor( props ) {
        super( props );

        // since you're using this method in a callback, don't forget to
        // bind the this context
        this.handleClick = this.handleClick.bind( this );
    }

    handleClick() {
        alert( "hello world" );
    }

    render(){
        return(
            <div>
                <button onClick={ this.handleClick }>Hello Application</button>

                </div>
        );
    }
}

answered Jul 21, 2017 at 21:30

Kyle Richardson

5,6553 gold badges20 silver badges40 bronze badges

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

Comments

Kaps · Accepted Answer · 2017-07-21 21:30:33Z

1

onClick will run function supplied to it. if you will do

 onClick={() => alert("hello world")} /** es6 **/

or

onClick={function() { alert("hello world"); }}

answered Jul 21, 2017 at 21:30

Kaps

1897 bronze badges

Comments

Artem Mirchenko · Accepted Answer · 2017-07-21 21:31:45Z

1

Because you put alert as object instead as mthod to be completed, you nedd to wrap your alert in function or method of the class. Try this code:

class Application extends React.Component{
 render(){
  return(
    <div>
     <button onClick={() => alert("hello world")}>Hello Application</button>

  </div>

  )
 }  

}

ReactDOM.render(<Application />,document.getElementById("tar"));

answered Jul 21, 2017 at 21:31

Artem Mirchenko

2,1701 gold badge11 silver badges21 bronze badges

Comments

Etherealm · Accepted Answer · 2017-07-21 21:34:11Z

1

You need to bind the onclick button

class Application extends React.Component{
render(){
    return(
      <div>
        <button onClick={() => alert("hello world")}>Hello Application</button>
      </div>
    )
  }  
}

ReactDOM.render(<Application />,document.getElementById("tar"));

answered Jul 21, 2017 at 21:34

Etherealm

2,5144 gold badges21 silver badges35 bronze badges

Collectives™ on Stack Overflow

onclick not firing in react

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related