React - Delete without click (onClick)?

Question

I use glyphicon with delete function as below:

<i className="glyphicon glyphicon-trash" onClick={this.deleteBook(book._id)}></i>

I think it should delete when click but when the page render, all contents are deleted without clicking.

The following is all part of code:

<div className="container">
                <div className="row">
                    <div className="col-md-6">
                        <ul className="book-list">
                            {this.state.pageOfItems.map(book => (
                                <li key={book._id} className="book-list__item">
                                    <div className="book thumbnail">
                                        <div className="caption">
                                            <h3 onClick={() => this.props.history.push(`${this.props.match.url}/view/${book._id}`)}>{book.title}</h3>
                                            <h4>{book.bookdate}</h4>
                                            <i className="glyphicon glyphicon-trash" onClick={this.deleteBook(book._id)}></i>
                                        </div>
                                    </div>
                                </li>
                            ))}
                        </ul>
                    </div>
                    <div className="col-md-6">

                    </div>
                </div>
            </div>

Arup Rakshit · Accepted Answer · 2018-09-02 10:09:50Z

3

Yes, inside JSX {...} all JS expression gets executed. So when you write, onClick={this.deleteBook(book._id)}, you are executing the function with this (), as you wrote this.deleteBook(book._id). Let's wrap it inside the Arrow fucntion as

onClick={() => this.deleteBook(book._id)}

With this onClick props, you attached a function object as an event handler. So when the click will happen this handler function will be called internally. Don't execute the event handler by yourself, let them called by the specific events you attached to.

edited Sep 2, 2018 at 10:09

answered Sep 2, 2018 at 10:07

Arup Rakshit

119k30 gold badges270 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adeel Imran · Accepted Answer · 2018-09-02 10:35:19Z

1

Either do this

onClick={() => this.deleteBook(book._id)}

Or second approach

onClick={this.deleteBook(book._id)}

Then where you define your function do this

this.deleteBook = id => () => {}

answered Sep 2, 2018 at 10:35

Adeel Imran

14k8 gold badges66 silver badges80 bronze badges

3 Comments

Agney Over a year ago

The second approach would call the function on render itself

Adeel Imran Over a year ago

No it will not this this.deleteBook = id => () => {} is same as this approach () => this.deleteBook(book._id)

Maicmi Over a year ago

@Adeel Imran, Thank you very much

Ali Torki · Accepted Answer · 2018-09-02 10:40:14Z

1

Please using the onClick function as below:

onClick={() => this.deleteBook.bind(this, book._id)}

So for receiving book._id argument value after clicking on the element, use the following model:

deleteBook(id, event) {// todo someting}

answered Sep 2, 2018 at 10:40

Ali Torki

2,0481 gold badge20 silver badges29 bronze badges

Collectives™ on Stack Overflow

React - Delete without click (onClick)?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related