React JS onClick method not being called

Question

I am new to React JS and am just picking it up. Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React - Component</title>
<script src="../../js/react.min.js"></script>
<script src="../../js/react-dom.min.js"></script>
<script src="../../js/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
  var Comment= React.createClass({
    edit:function(){
        alert('Editing comment');
      },
    remove:function(){
        alert('Remove comment');
      },
    render:function(){
      return(
        <div classname="commentContainer">
         <div classname="commentText">Whatever</div>
            <button classname="button-primary" onclick={this.edit}>Edit</button>
            <button classname="button-danger" onclick={this.remove}>Delete</button>
        </div>
      );
    }
  });

  ReactDOM.render(
  <div classname="board">
    <Comment>LOL</Comment>
  </div>,
   document.getElementById('container')
  );
</script>

When I click the edit/ delete buttons in the browser they do not show the alert dialog. What am I doing wrong in the code?

Perhaps it should be onClick={this.edit.bind(this)}? You getting any errors? — putvande
– putvande, Commented Jan 24, 2017 at 17:16
I think you have the wrong casing for onClick, you need to have a capital C like onClick={this.edit}. — MDiesel
– MDiesel, Commented Jan 24, 2017 at 17:17

putvande · Accepted Answer · 2017-01-24 17:18:28Z

2

React event handlers need to be in camelCase: onClick (Notice the capital 'C')

edited Jan 24, 2017 at 17:18

putvande

15.3k3 gold badges37 silver badges51 bronze badges

answered Jan 24, 2017 at 17:18

Lance Jernigan

2262 silver badges6 bronze badges

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

1 Comment

blaziken105 Over a year ago

Works fine now thnx

WitVault · Accepted Answer · 2017-01-24 17:19:31Z

You should use onClick instead onclick. See the working code below.

Read more about handling events in react here

  var Comment= React.createClass({
    edit:function(){
        alert('Editing comment');
      },
    remove:function(){
        alert('Remove comment');
      },
    render:function(){
      return(
        <div classname="commentContainer">
         <div classname="commentText">Whatever</div>
            <button classname="button-primary" onClick={this.edit}>Edit</button>
            <button classname="button-danger" onClick={this.remove}>Delete</button>
        </div>
      );
    }
  });

  ReactDOM.render(
  <div classname="board">
    <Comment>LOL</Comment>
  </div>,
   document.getElementById('container')
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React - Component</title>
</head>
<body>
<div id="container"></div>

Collectives™ on Stack Overflow

React JS onClick method not being called

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related