title: Uncaught TypeError: Cannot read property 'props' of null in React Class
body: <p>I have refactored a component and i am not using <code>React.createClass</code> in class methods anymore but i have this error now</p>
  
  <pre><code>{this.props.removeComment.bind(null, this.props.params.svgId, i)}
  </code></pre>
  
  <blockquote>
    <p><em>TypeError: Cannot read property 'props' of undefined</em></p>
  </blockquote>
  
  <p>The code was perfectly working</p>
  
  <p>Before the refactor </p>
  
  <pre><code>import React from 'react';
  
  const Comments = React.createClass({
    renderComment(comment, i) {
      return (
        &lt;div className="comment" key={i}&gt;
          &lt;p&gt;
            &lt;strong&gt;{comment.user}&lt;/strong&gt;
            {comment.text}
            &lt;button className="remove-comment" onClick={this.props.removeComment.bind(null, this.props.params.svgId, i)}&gt;&amp;times;&lt;/button&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      )
    },
  
    handleSubmit(e) {
      e.preventDefault();
      const { svgId } = this.props.params;
      const author = this.refs.author.value;
      const comment = this.refs.comment.value;
      this.props.addComment(svgId, author, comment);
      this.refs.commentForm.reset();
    },
  
    render() {
      return (
        &lt;div className="comments"&gt;
          {this.props.svgComments.map(this.renderComment)}
          &lt;form ref="commentForm" className="comment-form" onSubmit={this.handleSubmit}&gt;
            &lt;input type="text" ref="author" placeholder="author"/&gt;
            &lt;input type="text" ref="comment" placeholder="comment"/&gt;
            &lt;input type="submit" hidden /&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  });
  
  export default Comments;
  </code></pre>
  
  <p>Now after the refactor</p>
  
  <pre><code>import React from 'react';
  
  export default class Comments extends React.Component {
    renderComment(comment, i) {
      return (
        &lt;div className="comment" key={i}&gt;
          &lt;p&gt;
            &lt;strong&gt;{comment.user}&lt;/strong&gt;
            {comment.text}
            &lt;button className="remove-comment" onClick={this.props.removeComment.bind(null, this.props.params.svgId, i)}&gt;&amp;times;&lt;/button&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      )
    };
  
    handleSubmit(e) {
      e.preventDefault();
      const { svgId } = this.props.params;
      const author = this.refs.author.value;
      const comment = this.refs.comment.value;
      this.props.addComment(svgId, author, comment);
      this.refs.commentForm.reset();
    };
  
    render() {
      return (
        &lt;div className="comments"&gt;
          {this.props.svgComments.map(this.renderComment)}
          &lt;form ref="commentForm" className="comment-form" onSubmit={this.handleSubmit}&gt;
            &lt;input type="text" ref="author" placeholder="author"/&gt;
            &lt;input type="text" ref="comment" placeholder="comment"/&gt;
            &lt;input type="submit" hidden /&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  };
  </code></pre>
  
  <p>So how can i manually bind <code>this</code> in class constructor ?</p>