title: Problem with using different onClick events in one button component
body: <p>I wanted to make my components as reusable as it possible but when I started adding events the problems occured. I am using one button component in a lot of places in my app and I just change its name. It worked fine when I passed one onClick event to it (to change menu button name) but when I wanted to do the same with another button (to change cycle name) and when I passed second onClick event to the same button component the menu button stopped working. I tried to find solution but found only different topics. I know I could make a wrapper around the button and make onClick on the wrapper, but I think I am doing something wrong and there must be more elegant way to handle this.</p>
  <p>Button component</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>export const Button = ({text, changeButtonName, changeCycle}) =&gt; {
  
    return (
      &lt;AppButton onClick={changeButtonName, changeCycle}&gt;
        {text}
      &lt;/AppButton&gt;
    );
  };</code></pre>
  </div>
  </div>
  </p>
  <p>Navbar component where cycle and menuu buttons are placed</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>export const Navbar = () =&gt; {
  
    const menuButton = 'Menu';
    const closeButton = 'Zamknij';
  
    const [menuButtonName, setMenuButtonName] = useState(menuButton);
  
    const changeButtonName = () =&gt; {
      menuButtonName === menuButton ? setMenuButtonName(closeButton) : setMenuButtonName(menuButton);
    }
  
    const interiorButton = 'Interior →';
    const structuralCollageButton = 'Structural Collage →';
  
    const [cycleButtonName, setCycleButtonName] = useState(interiorButton);
  
    const changeCycle = () =&gt; {
      cycleButtonName === interiorButton ? setCycleButtonName(structuralCollageButton) : setCycleButtonName(interiorButton);
    }
  
    return (
      &lt;Nav&gt;
        &lt;AuthorWrapper&gt;
          &lt;AuthorName&gt;
            Michał Król
          &lt;/AuthorName&gt;
          &lt;AuthorPseudonym&gt;
            Structuralist
          &lt;/AuthorPseudonym&gt;
        &lt;/AuthorWrapper&gt;
        &lt;CycleButtonWrapper &gt;
          &lt;Button text={cycleButtonName} changeCycle={changeCycle} /&gt;
        &lt;/CycleButtonWrapper&gt;
        &lt;MenuButtonWrapper&gt;
          &lt;Button text={menuButtonName} changeButtonName={changeButtonName} /&gt;
        &lt;/MenuButtonWrapper&gt;
      &lt;/Nav&gt;
     )
  }</code></pre>
  </div>
  </div>
  </p>