title: Uncaught TypeError: Cannot read property 'stopPropagation' of null? - ReactJS
body: <p>React Component</p>
  
  <pre><code>export default class CommentBox extends React.Component {
    constructor() {
      super()
  
      this.state ={
        showComments: false,
        comments: [
          { id: uuid.v4(), author: 'Clu', body: 'Just say no to love!', avatarUrl: 'images/default-avatar.png' },
          { id: uuid.v4(), author: 'Anne Droid', body: 'I wanna know what love is...', avatarUrl: 'images/default-avatar.png' }
        ]
      }
    }
  
    render() {
      const comments = this._getComments() || [];
  
      let commentList;
      if (this.state.showComments) {
        commentList = &lt;div className="comment-list"&gt;{comments}&lt;/div&gt;
      }
  
      return(
        &lt;div className="comment-box"&gt;
          &lt;h3&gt;COMMENTS&lt;/h3&gt;
          {this._getPopularMessage(comments.length)}
          &lt;h4 className="comment-count"&gt;{this._getCommentsTitle(comments.length)}&lt;/h4&gt;
          &lt;button className="comment-toggle" onClick={this._toggleShowComments.bind(this)}&gt;{this._toggleCommentButton()}&lt;/button&gt;
          &lt;CommentForm addComment={this._addComment.bind(this)}/&gt;
          {commentList}
        &lt;/div&gt;
      );
    }
  
    _addComment(author, body) {
      const comment = {
        id: uuid.v4(),
        author: author,
        body: body
      }
  
      this.setState({comments: this.state.comments.concat([comment])})
    }
  
    _getComments() {
  
      return this.state.comments.map((comment) =&gt; {
        return (&lt;Comment
                 author={comment.author}
                 body={comment.body}
                 avatarUrl={comment.avatarUrl}
                 key={comment.id}
                 onDelete = {this._deleteComment.bind(this, null, comment.id)}/&gt;)
      });
    }
  </code></pre>
  
  <p>The main issue...
  If I leave out <code>event.stopPropagation</code>, when I run this and click the 'Delete Comment' link, everything works as expected. However, when I add it in, I get the error <code>Uncaught TypeError: Cannot read property 'stopPropagation' of null</code>. I assume the <code>onClick</code> event in the Comment component (see bottom code box), is not passing the event through. Is there any way to rectify this?</p>
  
  <pre><code>  _deleteComment(event, key) {
      event.stopPropagation()
      console.log(key)
      this.setState (
        {comments: this.state.comments.filter((singleComment) =&gt; singleComment.id !== key)
        }
      )
      console.log(this.state.comments)
    }
  }
  </code></pre>
  
  <p>For reference, the Comment component:
  I tried binding(this) to <code>onDelete</code> e.g. <code>&lt;a className="comment-actions-delete" href="#" onClick={this.props.onDelete.bind(this)}&gt;Delete comment&lt;/a&gt;</code> but it didn't seem to work.</p>
  
  <pre><code>export default class Comment extends React.Component {
    constructor() {
      super();
      this.state = {
        isAbusive: false
      };
    }
  
    render() {
      let commentBody;
      if (!this.state.isAbusive) {
        commentBody = this.props.body;
      } else {
        commentBody = &lt;em&gt;Content marked as abusive&lt;/em&gt;;
      }
      return(
        &lt;div className="comment"&gt;
          &lt;p className="comment-header"&gt;{this.props.author}&lt;/p&gt;
          &lt;p className="comment-body"&gt;
            {commentBody}
          &lt;/p&gt;
          &lt;div className="comment-actions"&gt;
            &lt;VotingButtons /&gt;
            &lt;a className="comment-actions-delete" href="#" onClick={this.props.onDelete}&gt;Delete comment&lt;/a&gt;
            &lt;a className="comment-actions-abuse" href="#" onClick={this._toggleAbuse.bind(this)}&gt;Report as abuse&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  
    _toggleAbuse(event) {
        event.preventDefault();
        this.setState({isAbusive: !this.state.isAbusive})
    }
  }
  </code></pre>