title: Add & Remove class on button in React
body: <p>I am new in React so this question could sound a little bit but I couldnt figure it out. So I have two buttons and I want to add class on them when one of them are clicked. So buttons must be default className=&quot;button&quot; and one of them clicked it should be added to the clicked button &quot;selected-button&quot; class. Besides, when the Button1 clicked, &quot;selected-button&quot; should be removed from Button2. I am really new in React sometimes, easy things could be confusing, thank you for your helps.</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { Form } from &quot;react-bootstrap&quot;;
  
  export class InstantQuote extends Component {
    constructor(props) {
      super(props);
      this.state = {
        active: false,
      };
    }
  
    toggleClass() {
      const currentState = this.state.active;
      this.setState({ active: !currentState });
    }
  
    render() {
      const handleSubmit = (e) =&gt; {
        e.preventDefault();
      };
      return (
        &lt;Form className=&quot;instantquote shadow p-3 mb-5&quot; onSubmit={handleSubmit}&gt;
          &lt;Form.Group controlId=&quot;formGroupFrom&quot;&gt;
            &lt;div className=&quot;selectable-buttons&quot;&gt;
              &lt;button type=&quot;submit&quot;
              className={((this.state.active) ? &quot;button button-selected&quot;: &quot;button&quot;)}
              onClick={ () =&gt; this.setState({active: !this.state.active}) }&gt;
                Button1
              &lt;/button&gt;
              &lt;button type=&quot;submit&quot;
              className={((this.state.active) ? &quot;button button-selected&quot;: &quot;button&quot;)}
              onClick={ () =&gt; this.setState({active: !this.state.active}) }&gt;
                Button2
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/Form.Group&gt;
        &lt;/Form&gt;
      );
    }
  }
  
  export default InstantQuote;
  </code></pre>