title: How to change state of button on click and revert back to the original state when clicked again in React?
body: <p>I have a button which I have defined as:</p>
  <pre><code>&lt;button className={class} onClick={() =&gt; changeClassProperty()}&gt;
          {classText}
  &lt;/button&gt;
  </code></pre>
  <p>I want to change the css styling class and the text of the button <strong>A</strong> onclick. So currently I am doing this using UseState hoook as follows:</p>
  <pre><code>const [classColor, setClassColor] = useState(styles.classAButton);
  const [classText, setClassText] = useState(&quot;A&quot;);
  </code></pre>
  <p>The changeClassColor() handler is reponsible for changing the css color style and the text of my button as:</p>
  <pre><code>function changeClassProperty() {
      setClassColor(styles.classBButton);
      setClassText(&quot;B&quot;);
    }
  </code></pre>
  <p>So on the click of button <strong>A</strong> it changes it color and text to my button <strong>B</strong>. Now, I want that whenever a click is made to the button it switches between the states A and B. How do I achieve that?</p>