CODEWITHSUNDEEP
reactjs
Graham Slick
Graham Slick

Reputation: 6870

React onClick event not firing

I am new to React and I am trying to create a upvote features on posts using React.js . I have a post_list_item.js.jsx :

var PostListItem = React.createClass({
  render: function() {
    return (
      <div className="post">
        <div className="post-upvote"><button type="button" class="btn btn-primary">Upvote</button></div>
        <div className="post-body">
          <h3>
            <a href={this.props.post.title} target="_blank">{this.props.post.title}</a>
          </h3>
          <p>{this.props.post.content}</p>
        </div>
        <div className="post-controls">
          <div className="post-control">
            <div className="user-badge-container ">
              <img src={this.props.post.user.picture_url} className="avatar"/>
            </div>
          </div>
        </div>
      </div>
    );
  }
});

and a upvote.js.jsx : 

var Upvote = React.createClass({
  getInitialState: function() {
    return {
      post: this.props.post
    }
  },

  render: function() {
    var divClasses = classNames({
      "post-upvote": true,
      "post-upvote-upvoted": this.state.post.up_voted
    });

    return (
      <div className={divClasses} onClick={this.handleClick}>
        <div className="post-upvote-arrow"></div>
        <div className="post-upvote-count">
          {this.state.post.up_votes}
        </div>
      </div>
    );
  }
});

My post list appears with an upvote button next to each post. However, nothing happens when I click on the upvote button.

This is my handleClick() function that I added to my application.js file:

var handleClick = function() {
    var that = this;
    $.ajax({
      type: 'POST',
      url: Routes.upvote_post_path(this.props.post.id, { format: 'json' }),
      success: function(data) {
        that.setState({ post: data });
      }
    });
  }

Did I miss something ?

Upvotes: 0

Views: 1178

Answers (2)

Oleksandr T.
Oleksandr T.

Reputation: 77522

In Upvote component there is no method handleClick, so you pass to onClick undefined., move handleClick method to Upvote

var Upvote = React.createClass({
  getInitialState: function() {
    return {
      post: this.props.post
    }
  },

  handleClick: function() {
    var that = this;
    $.ajax({
      type: 'POST',
      url: Routes.upvote_post_path(this.props.post.id, { format: 'json' }),
      success: function(data) {
        that.setState({ post: data });
      }
    });
  },

  render: function() {
    var divClasses = classNames({
      "post-upvote": true,
      "post-upvote-upvoted": this.state.post.up_voted
    });

    return (
      <div className={divClasses} onClick={this.handleClick}>
        <div className="post-upvote-arrow"></div>
        <div className="post-upvote-count">
          {this.state.post.up_votes}
        </div>
      </div>
    );
  }
});

Upvotes: 1

Ven
Ven

Reputation: 19040

When you say {this.handleClick} (inside your react component), it means "use the handleClick function defined on this component". The function should be with the others, in your var Upvote = react.createClass (it should be an instance method, basically).

Upvotes: 1

Related Questions