CODEWITHSUNDEEP
javascripthtmlruby-on-rails
user13790968
user13790968

Reputation: 123

onClick delete button deletes without click

I created a button to delete videos from a list of video titles and as soon as the page renders all videos on the list are deleted. I tried creating callback handleSubmit, but it does the same thing. Any suggestions?

    handleDelete(videoId) {
        this.props.deleteVideo(videoId);
    }

    render() {
        const userVideos = this.props.videos.filter(video => video.owner_id == this.props.currentUser.id)
        const videoList = userVideos.map(video => {
            return (
                <ul key={video.id} className="user-ul">
                    <div className="user-list-item">
                        <h2 className="user-title">{video.video_title}</h2>
                        <h2 className="user-description">{video.video_description}</h2>
                        <h2 className="user-upload-date">uploaded {this.dateCreated(video.created_at)}</h2>
                    </div>
                    <button>Edit video</button>
                    <button className="delete-video" onClick={this.handleDelete(video.id)}>Delete Video</button>
                </ul>
            )
        })

        return (
            <div className="user-container">
                <h1 id="user-initial">{this.props.currentUser.username[0]}</h1>
                <ul className="user-ul">
                    {videoList}
                </ul>
                <div className="user-footer">
                    <h2 className="home-footer-1">@2020</h2>
                    <h2 className="home-footer-2">
                        Made with
                        <svg viewBox="0 0 20 20" className="_3Weix"><path d="M10 18a1.23 1.23 0 01-.8-.4 14.25 14.25 0 00-4.4-3.7C2.5 12.3 0 10.7 0 7.5a5.52 5.52 0 011.6-3.9A5.73 5.73 0 016 2a5.25 5.25 0 014 1.9A5.85 5.85 0 0114 2c2.9 0 6 2.2 6 5.5s-2.5 4.8-4.8 6.4a15.51 15.51 0 00-4.4 3.7 1.23 1.23 0 01-.8.4z" fill="rgb(255,0,0)"></path></svg>
                        NYC
                    </h2>
                </div>
            </div>
        )
    }

Upvotes: 2

Views: 94

Answers (3)

gautamits
gautamits

Reputation: 1292

All event listeners like onClick, onHover take a function which executes after event fires.

Your code

<button className="delete-video" onClick={this.handleDelete(video.id)}> Delete Video </button>

is not assigning function to onClick but return value of function this.handleDelete which is executing on every render hence deleting without click.

Proper way would be to assign a function to onClick like

<button className="delete-video" onClick={(clickEvent)=>this.handleDelete(video.id)}> Delete Video </button>

Upvotes: 1

Lucas Brogni
Lucas Brogni

Reputation: 129

You can change the handleDelect been called inside an arrow function and it'll work. It happens because of the bind.

<button className="delete-video" onClick={() => this.handleDelete(video.id)}>Delete Video</button>

Another approach you might can try is to pass explicit the bind to this function.

<button className="delete-video" onClick={this.handleDelete(video.id).bind(this)}>Delete Video</button>

I really recommend you look at https://reactjs.org/docs/handling-events.html of how to handle with events.

Upvotes: 2

Siddharth Seth
Siddharth Seth

Reputation: 664

Please try the below

onClick={() => this.handleDelete(video.id)}

This will call the handleDelete method only when the click event occurs.

Upvotes: 3

Related Questions