title: How to toggle class on mousedown/mouseup in react component?
body: <p>I'm trying to toggle a class in a react component where if a user has his mouse down on a button, then it'll add a class to that button and when the user has his mouseup, then it reverts back and removes the class from the button.</p>
  
  <p>Following the explanations and examples in the official ReactJS docs <a href="https://reactjs.org/docs/handling-events.html" rel="nofollow noreferrer">here</a>, I managed to put together the following snippet but it's not working and keeps throwing syntax errors on the console:</p>
  
  <pre><code>import React from 'react';
  
  export class Buttons extends React.Component{
  
      toggleClass() {
          if this.classList.has('btnDown') {
              this.classList.remove('btnDown');
          } else {
              this.classList.add('btnDown');
          }
      }
  
  
      render(){
          return (
              &lt;div className="btn-wrap"&gt;
                  &lt;button onMouseDown={(e) =&gt; this.toggleClass(e)} onMouseUp={(e) =&gt; this.toggleClass(e)} value = '1' &gt;1&lt;/button&gt;
                  &lt;button onMouseDown={(e) =&gt; this.toggleClass(e)} onMouseUp={(e) =&gt; this.toggleClass(e)} value = '2' &gt;2&lt;/button&gt;
                  &lt;button onMouseDown={(e) =&gt; this.toggleClass(e)} onMouseUp={(e) =&gt; this.toggleClass(e)} value = '3' &gt;3&lt;/button&gt;
                  &lt;button onMouseDown={(e) =&gt; this.toggleClass(e)} onMouseUp={(e) =&gt; this.toggleClass(e)} value = '4' &gt;4&lt;/button&gt;
                  &lt;button onMouseDown={(e) =&gt; this.toggleClass(e)} onMouseUp={(e) =&gt; this.toggleClass(e)} value = '5' &gt;5&lt;/button&gt;
                  &lt;button onMouseDown={(e) =&gt; this.toggleClass(e)} onMouseUp={(e) =&gt; this.toggleClass(e)} value = '6' &gt;6&lt;/button&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <h2>UPDATE:</h2>
  
  <p>I rewrote the component to use react's <code>state</code> using @TomaszMularczyk's answer below as a reference but now all the buttons are toggled instead of just the button clicked as can be seen here: <a href="https://jsfiddle.net/69z2wepo/183164/" rel="nofollow noreferrer">https://jsfiddle.net/69z2wepo/183164/</a></p>