CODEWITHSUNDEEP
javascriptreactjs
Megh Parikh
Megh Parikh

Reputation: 964

React onClick not firing

The following code doesn't work. The onClick events are never fired but I see no errors in browserify or console.

var React = require('react');

var Button = React.createClass({
  render: function() {
    return (
      <div className="Button">
        <span className="left" onclick={function() {alert("left")}}>Left</span>
        <span className="right" onclick={function() {alert("right")}}>Right</span>
        <span className="middle" onclick={function() {alert("middle")}}>Middle</span>
      </div>
    );
  }
});

module.exports=Button;

I use alert just for testing small CSS. Why isn't onclick firing?

Upvotes: 6

Views: 17681

Answers (3)

Asma Rahim Ali Jafri
Asma Rahim Ali Jafri

Reputation: 1383

I was facing the same issue. The problem was that the <span> tag was in the top-left corner and the alert would only fire when I would click the top-left corner. Not any other space.

I changed <span> to <div> and it worked.

Upvotes: 0

Anupam Maurya
Anupam Maurya

Reputation: 2211

Here with arrow function syntax, triggering the event with onClick handler.

<span className="left" onClick={() => {alert("left")}}>Left</span>

Upvotes: 1

Jerome WAGNER
Jerome WAGNER

Reputation: 22422

You have a typo in your example. Use 'onClick' instead of 'onclick'.

<span className="left" onClick={function() {alert("left")}}>Left</span>

see jsfiddle for a working example - https://jsfiddle.net/Ltdc8qpr/1/

Upvotes: 10

Related Questions