How to add and remove a class when I click on an element?

Question

React

How to add and remove a class when I click on an element?

<a href="/" onClick={this.showAllBook.bind(this)}>All Book</a>

and the handler hangs on it

showAllBook(event) {
    event.preventDefault();
    const name = "One";
    this.props.showAllBooks();

which inherits props from parent component

showAllBooks() {
    const { allBooks } = this.state;
    this.setState({filteredBooks: allBooks});
}

how can i add class to clickable link and remove when another one is clicked?

Answer 1

<a 
  className={filter === 'all' ? 'active' : null}
  onClick={() => setFilter('all')}
>
  All Book
</a>