title: React.js - Component as CommonJS Module - Events not working
body: <p>I'm in the very early phase of learning React.js. I'm trying to learn how to modularize React.js components.</p>
  
  <p>I make a React.js component as a CommonJS module, and when I invoke it from other module - all seem to work except that the events doesn't seem to bind to the view when the component re-renders after a state change.</p>
  
  <p>I've place my code at the end.</p>
  
  <p>I've placed the code for <code>TestComponent</code> in a file name <code>component.jspx</code>. Then I use the component from <code>app.js</code></p>
  
  <p>Per the code in <code>TestComponent</code>, the component on it's initialState will have two list-items (with a button that triggers an event). </p>
  
  <p>Then on <code>componentDidMount</code>, I change the state with an additional data.</p>
  
  <p>The component renders properly - except that the event <code>handleClickEvenet</code> doesn't seem to get bound for the updated view.</p>
  
  <p>Please help me understand how to fix this problem.</p>
  
  <pre><code>// 
  // component.jsx
  
  var TestComponent =React.createClass({
  
      handleClickEvent: function() {
          alert ('Clicked...');
      },
  
      getInitialState: function() {
          return {
              comments: [
                  {author: 'A1', comment: 'Comment by A1'},
                  {author: 'A2', comment: 'Comment by A2'}
              ]
          };
      },
  
      componentDidMount: function() {
          var comments = this.state.comments;
          comments.push({author: 'A3', comment: 'Comment by A3'});
          this.setState({comments: comments});
      },
  
      render: function() {
          var thisComponent = this;
          return (
                  &lt;ol&gt;
                      {
                          this.state.comments.map (function(comment, i) {
                              return (
                                      &lt;li&gt;
                                          {comment.comment} | {comment.author} |
                                          &lt;button onClick={thisComponent.handleClickEvent}&gt;Click me&lt;/button&gt;
                                      &lt;/li&gt;
                                      )
                          })
                      }
                  &lt;/ol&gt;
          )
      }
  })
  
  module.exports = TestComponent;
  
  
  // -------
  // app.js
  // -------
  
  var CommentBox = require('./components/Demo.jsx');
  var React = require('../components/react/react-with-addons.js');
  
  var commentBox = React.createElement(CommentBox, data);
  React.render(commentBox, document.body);
  </code></pre>