title: Toggle selected/active state with react-bootstrap ListGroup
body: <p>I'm building a multiple selection in React with a react-bootstrap <a href="https://react-bootstrap.github.io/components/list-group/" rel="nofollow noreferrer">ListGroup</a>.</p>
  <p>Despite having the <code>active</code> property of an item set to <code>false</code> though, the last clicked item still gets <em>active</em> in its class list.</p>
  <p>I've been considering getting a reference to the list item and manipulate the class list, but that is too dirty.</p>
  <p>I tried changing the <code>variant</code> attribute of the <code>ListGroup.Item</code>, but the <em>active</em> class overrides that. I'd prefer to not modify the css class definition.</p>
  <p>I prefer using the onSelect handler of the ListGroup instead of using the ToggleButton's onClick event from a usability perspective.</p>
  <p>Have you tried using a ListGroup to manipulate multiple selection?</p>
  <p>Here is stripped version of the code:</p>
  <pre><code>import { useState } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import ListGroup from &quot;react-bootstrap/ListGroup&quot;;
  import Container from &quot;react-bootstrap/Container&quot;;
  import Row from &quot;react-bootstrap/Row&quot;;
  import Col from &quot;react-bootstrap/Col&quot;;
  import ToggleButton from &quot;react-bootstrap/ToggleButton&quot;;
  import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  import { cloneDeep } from &quot;lodash&quot;;
  
  export default function App() {
    const allItems = [
      { id: 1, title: &quot;A&quot; },
      { id: 2, title: &quot;B&quot; },
      { id: 3, title: &quot;C&quot; },
      { id: 4, title: &quot;D&quot; },
      { id: 5, title: &quot;E&quot; }
    ];
    const [selectedItems, setSelectedItems] = useState([
      { id: 2, title: &quot;B&quot; },
      { id: 4, title: &quot;D&quot; }
    ]);
    function toggleSelection(eventKey, e) {
      const itemId = parseInt(eventKey?.replace(/^itemSelect_/, &quot;&quot;), 10);
  
      const newSelectedItems = cloneDeep(selectedItems);
      const indexInSelection = selectedItems.findIndex(
        (sitm) =&gt; sitm.id === itemId
      );
  
      if (indexInSelection &gt;= 0) {
        newSelectedItems.splice(indexInSelection, 1);
      } else {
        const newItem = allItems.find((itm) =&gt; itm.id === itemId);
        newSelectedItems.push(newItem);
      }
      setSelectedItems(newSelectedItems);
    }
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;ListGroup onSelect={toggleSelection}&gt;
          {allItems.map((itm) =&gt; {
            return (
              &lt;ListGroup.Item
                eventKey={`itemSelect_${itm.id}`}
                key={`itemSelect${itm.id}`}
                active={
                  selectedItems.find((sitm) =&gt; sitm.id === itm.id) !== undefined
                }
              &gt;
                &lt;Container&gt;
                  &lt;Row&gt;
                    &lt;Col sm=&quot;2&quot;&gt;
                      {&quot; &quot;}
                      &lt;ToggleButton
                        className=&quot;mx-1&quot;
                        type=&quot;checkbox&quot;
                        size=&quot;sm&quot;
                        key={`check${itm.id}`}
                        checked={
                          selectedItems.find((sitm) =&gt; sitm.id === itm.id) !==
                          undefined
                        }
                        value={itm.id}
                      &gt;&lt;/ToggleButton&gt;
                    &lt;/Col&gt;
                    &lt;Col sm=&quot;10&quot;&gt;{itm.title}&lt;/Col&gt;
                  &lt;/Row&gt;
                &lt;/Container&gt;
              &lt;/ListGroup.Item&gt;
            );
          })}
        &lt;/ListGroup&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>And a live preview is available at <a href="https://codesandbox.io/s/peaceful-cartwright-3d39p?file=/src/App.js:0-2336" rel="nofollow noreferrer">Code Sandbox</a></p>
  <p>Thanks in advance for your help!</p>