I am using an onClick function and trying to also pass an object with it. I need the object to make the function work. But for some reason it is giving me this error.

The error is ing from the onClick function from the delete button that I am rendering on each ment. If I remove the ment I am passing with it the error goes away (so the function itself is not the problem). I am not sure if I am passing the ment through wrong or what.

As I usually do if you request more information or want me to try to console log something I will put it in an edit so the ments do not get crowded and it will be easier for others to see.

    renderCommentsButtons(ment) {
    const { post, user, auth } = this.props;

    if(!user) {
      return (<div></div>);
    }

    if(auth) {
      if(user._id === ment.author.id) {
        return (
          <div>
            <button
              onClick={this.deleteComment, ment}
              className="btn btn-xs btn-danger">
              Delete
            </button>
            <Link
              to={`/posts/${post._id}/ments/${ment._id}/edit`}
              className="btn btn-xs btn-warning">
              Edit
            </Link>
          </div>
        )
      }
    }
  }

  renderComments() {
    const { post } = this.props;

    return postments.map((ment) => {
      return (
        <li className="list-group-item" key={ment._id}>
          <div>
            {ment.text} : {ment.author.email}
          </div>
          {this.renderCommentsButtons(ment)}
        </li>
      );
    });
  }

  deleteComment({ author, _id}) {
    const {id} = this.props.match.params;
    const {user} = this.props;

    if(this.props.auth) {
      if(user._id === author.id){
        this.props.deleteComments(id, _id, () => {
          this.props.history.push(`/posts/${id}`);
        });
      }
    }
  }

I am using an onClick function and trying to also pass an object with it. I need the object to make the function work. But for some reason it is giving me this error.

The error is ing from the onClick function from the delete button that I am rendering on each ment. If I remove the ment I am passing with it the error goes away (so the function itself is not the problem). I am not sure if I am passing the ment through wrong or what.

As I usually do if you request more information or want me to try to console log something I will put it in an edit so the ments do not get crowded and it will be easier for others to see.

    renderCommentsButtons(ment) {
    const { post, user, auth } = this.props;

    if(!user) {
      return (<div></div>);
    }

    if(auth) {
      if(user._id === ment.author.id) {
        return (
          <div>
            <button
              onClick={this.deleteComment, ment}
              className="btn btn-xs btn-danger">
              Delete
            </button>
            <Link
              to={`/posts/${post._id}/ments/${ment._id}/edit`}
              className="btn btn-xs btn-warning">
              Edit
            </Link>
          </div>
        )
      }
    }
  }

  renderComments() {
    const { post } = this.props;

    return post.ments.map((ment) => {
      return (
        <li className="list-group-item" key={ment._id}>
          <div>
            {ment.text} : {ment.author.email}
          </div>
          {this.renderCommentsButtons(ment)}
        </li>
      );
    });
  }

  deleteComment({ author, _id}) {
    const {id} = this.props.match.params;
    const {user} = this.props;

    if(this.props.auth) {
      if(user._id === author.id){
        this.props.deleteComments(id, _id, () => {
          this.props.history.push(`/posts/${id}`);
        });
      }
    }
  }

• javascript
• reactjs
• redux

1 Answer 1

Try this:

<button
  onClick={() => this.deleteComment(ment)}
  className="btn btn-xs btn-danger">
  Delete
</button>

You are not passing the ment in correctly, onClick takes a function only, if you want to pass parameters you must do it like above.