title: Uncaught TypeError: Cannot read property 'props' of undefined in reactJS
body: <p>I'm trying out an example in reactJS where I'm displaying a list of records and delete them.Refresh the list after each delete. I saw many questions raised by this error heading, but nothing worked with me.</p>
  
  <pre><code>var CommentBox = React.createClass({
          loadCommentsFromServer: function () {
              $.ajax({
                  url: this.props.listUrl,
                  dataType: 'json',
                  success: function (data) {
                      this.setState({data: data});
                  }.bind(this),
                  error: function (xhr, status, err) {
                      console.error(this.props.url, status, err.toString());
                  }.bind(this),
                  cache: false
              });
          },
          getInitialState: function () {
              return {data: []};
          },
          componentDidMount: function () {
              this.loadCommentsFromServer();
          },
          onClickingDelete: function() {
              alert('Upper layer on click delete called');
              this.loadCommentsFromServer();
          },
          render: function () {
              return (
                      &lt;div className="commentBox"&gt;
                          &lt;h1&gt;Static web page&lt;/h1&gt;
                          &lt;CommentList data={this.state.data} onClickingDelete={this.onClickingDelete}  /&gt;
  
  
                      &lt;/div&gt;
              );
          }
      });
  
  
      var CommentList = React.createClass({
          render: function() {
              if (this.props.data != '') {
                  var commentNodes = this.props.data.content.map(function (comment) {
  
                      return (
                              &lt;div className="comment" key={comment.id}&gt;
                                  &lt;h2 className="commentpageName"&gt;
                                      {comment.pageName}
                                  &lt;/h2&gt;
  
                                  &lt;p&gt; {comment.pageContent} &lt;/p&gt;
  
                                  &lt;DeleteButton deleteUrl={'/delete/' + comment.id} onClickingDelete={this.props.onClickingDelete}/&gt;
  
                              &lt;/div&gt;
                      );
                  });
              }
              return (
                  &lt;div className="commentList"&gt;
                      {commentNodes}
                  &lt;/div&gt;
              );
          }
      });
  
      var DeleteButton = React.createClass({
          onClickingDelete: function() {
              $.ajax({
                  url: this.props.deleteUrl,
                  type: 'delete',
                  success: function () {
                      alert('Successfully deleted');
                      this.props.onClickingDelete();
                  }.bind(this),
                  error: function (xhr, status, err) {
                     console.error(this.props.deleteUrl, status, err.toString());
                  }.bind(this),
                  cache: false
              });
  
          },
          render: function() {
              return (
                  &lt;button name={this.props.deleteUrl} onClick={this.onClickingDelete}&gt;Delete&lt;/button&gt;
              );
          }
      });
  
  
      ReactDOM.render(&lt;CommentBox listUrl="/list/"/&gt;, 
  document.getElementById('content'));
  </code></pre>
  
  <p>On page load, I'm getting </p>
  
  <blockquote>
    <p>"Uncaught TypeError: Cannot read property 'props' of undefined" </p>
  </blockquote>
  
  <p>in the CommentList's line call to DeleteButton. Wondering how "this" can go undefined</p>