title: REACT: toggle class onClick, and call other function
body: <p>I am new to react so please be patient - I'm sure this is a simple problem but I am having a lot of trouble figuring out a solution.</p>
  
  <p>I have a set of buttons, when they are clicked I add an 'active' className to that button and remove it from any other buttons that might be active.</p>
  
  <p>I also need to open a panel with content based on which button is clicked.</p>
  
  <p>So far I have managed to toggle the className of the clicked button, but can't figure out how to only apply it to the button that is clicked (see code below)</p>
  
  <pre><code>&lt;a onClick={this.buttonClick(1)} className={this.state.isButtonActive ? 'active' : null}&gt;button text&lt;/a&gt;
  &lt;a onClick={this.buttonClick(2)} className={this.state.isButtonActive ? 'active' : null}&gt;button text&lt;/a&gt;
  </code></pre>
  
  <p>and the function to toggle the active state and open appropriate panel based on the button clicked:</p>
  
  <pre><code>buttonClick(buttonNumber) {
  
      this.setState(prevState =&gt; ({
          isButtonActive: !prevState.isButtonActive
      }));
  
      openPanel(buttonNumber)
  }
  </code></pre>
  
  <p>I have experimented with creating a child component for the button and toggling the className within the component, but then I can't trigger the openPanel() function as it is in the parent component.</p>
  
  <p>I hope that makes sense - thank you in advance :)</p>