title: How can I keep the selection active state of a button?
body: <p>In this quiz selection component I put two different div bootstrap list-group with buttons.
  I'd like to keep the active class when I click on some button but only one of them inside each div can be active.
  So for example if I click on "History" and then "Medium", I'd like them to keep active class.</p>
  
  <p>I've tried to add some bootstrap 4 options like "Active state" and tried to toggle active class onClick.
  But in this way active class still stay in each button I click.</p>
  
  <p>Thank you very much for help</p>
  
  <pre><code>class Selection extends React.Component {
    render() {
      return (
        &lt;div className="border rounded w-75 mx-auto"&gt;
          &lt;div className="row pt-4"&gt;
            &lt;div className="col-6"&gt;
              &lt;div
                onClick={this.props.chooseCategory}
                className="list-group w-75 ml-auto"
              &gt;
                &lt;p&gt;Choose a category&lt;/p&gt;
                &lt;button
                  type="button"
                  className="list-group-item list-group-item-action" active
                &gt;
                  Mix
                &lt;/button&gt;
                &lt;button
                  type="button"
                  className="list-group-item list-group-item-action"
                &gt;
                  Sports
                &lt;/button&gt;
                &lt;button
                  type="button"
                  className="list-group-item list-group-item-action"
                &gt;
                  History
                &lt;/button&gt;
                &lt;button
                  type="button"
                  className="list-group-item list-group-item-action"
                &gt;
                  Movies
                &lt;/button&gt;
                &lt;button
                  type="button"
                  className="list-group-item list-group-item-action"
                &gt;
                  Geography
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className="col-6"&gt;
              &lt;div
                className="list-group w-50 mr-auto"
                onClick={this.props.chooseDifficulty}
              &gt;
                &lt;p&gt;Choose the difficulty&lt;/p&gt;
                &lt;button
                  type="button"
                  className="list-group-item list-group-item-action active"
                &gt;
                  Easy
                &lt;/button&gt;
                &lt;button
                  type="button"
                  className="list-group-item list-group-item-action"
                &gt;
                  Medium
                &lt;/button&gt;
                &lt;button
                  type="button"
                  className="list-group-item list-group-item-action"
                &gt;
                  Hard
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;button
            onClick={this.props.handleStart}
            className="btn btn-outline-primary my-4"
          &gt;
            START
          &lt;/button&gt;
        &lt;/div&gt;
  </code></pre>