ReactJS - Href Triggered DELETE Method

Question

I'm determining the correct method for triggering my DELETE route through the use of href and node-fetch. I had originally thought that passing a function in my stateful component as an attribute on my stateless component and then using that as the link location would trigger the function, but it doesn't appear to work and now I am left second guessing my approach. Is there a better solution to what I have attempted?

Here is my stateful component:

class Comment extends React.Component {

    constructor(props){
        super(props);
        this.state = {};
    }

    commentInformation(e){
        //e.preventDefault();
        console.log("commentInformation function triggered");
        this.deleteComment(this.props.recordIdHash, this.recordCommentId);
    }

    deleteComment(recordId, recordCommentId){
        var body = { recordId: recordId, recordCommentId: recordCommentId };
        var route = 'http://localhost:3000/app/record/' + recordId + '/comment/' + recordCommentId;
        fetch(route, 
            { 
                method: 'DELETE', 
                body: JSON.stringify(body), 
                headers: { 
                    'X-CSRF-Token': 'csrfToken',
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(res => {
                return res.json();
            })  
            .then(data => {
                console.log(data);
                this.props.updateComments(data)
                this.setState({'flash': 'success'});
            }) 
            .catch(err => {
                console.log(err);
                this.setState({'flash': 'error'});
            });
    }

    render(){
        return (
            <div className="record-comment__record">
                <div className="row">
                    <div className="col-md-12">
                        <div className="record-comment__meta">
                            <div className="row">
                                <div className="col-md-8 record-comment__profile">
                                    <img src={this.props.app.picture} className="profile__picture profile__picture--small"/>
                                    <p className="record-comment__info"><b>{this.props.app.fullNameSlug}</b> | <i>{this.props.createdAtDateSlug}</i></p>
                                    <DeleteComment commentUserId={this.props.app.userId} userId={this.props.currentUserId} recordId={this.props.recordIdHash} deleteComment={this.commentInformation} commentId={this.props.recordCommentId}/>
                                </div>
                            </div>
                        </div>
                        <div className="record-comment__body">
                            <div className="row">
                                <div className="col-md-12">
                                    <p>{this.props.comment}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

Here is my <DeleteComment> component which maps the comment user id to the logged in user id and if they are the same, then show the delete href:

const DeleteComment = props => {
    if(props.commentUserId == props.userId){
        return (
            <a href={props.deleteComment} className="record-comment__delete"> | Delete</a>
        )
    } else {
        return null;
    }
}

Answer 1

It should be onClick instead of href:

const DeleteComment = props => {
    if(props.commentUserId == props.userId){
        return (
            <a onClick={props.deleteComment} className="record-comment__delete"> | Delete</a>
        )
    } else {
        return null;
    }
}

Also, I think you are going to need to bind deleteComment method in your Comment component to not lose your this reference (see https://reactjs.org/docs/handling-events.html)

class Comment extends React.Component {

    constructor(props){
        super(props);
        this.state = {};
        this.deleteComment = this.deleteComment.bind(this);
    }

}

Answer 2

In you DeleteComment-component you are passing a function to a href.. That is not correct, since href expects a string.

You could use onClick instead, and change your href to href="#" or use a <button />