title: Modifying classList in event handler in React component
body: <p>What I am trying to achieve with this is quite simple. I have an array of options/tags displayed in a div. I want the classes to change on click to simulate an &quot;active&quot; state. While I've seen a few snippets on codesandbox that I could use to achieve what I want, my curiosity still is why this wouldn't even trigger the class change.</p>
  <p>The referenced event elements and id match...</p>
  <pre><code>const variantHandler = (e: any) =&gt; {
      e.preventDefault()
    
  const d = e.currentTarget
  
  const c = () =&gt; {
      variants.map((variant: any) =&gt; {
          if (d.id !== variant.node.id) {
              d.classList.remove('bg-gray-900', 'text-myGray', 'dark:bg-myGray', 'dark:text-gray-900')
              //alert('reached remove')
          }
          else {
              d.classList.add('bg-gray-900', 'text-myGray', 'dark:bg-myGray', 'dark:text-gray-900')
              //alert('reached add')
          }
      })
  }
  c();
  }
  </code></pre>