title: React useState toggle single button
body: <p>I have multiple buttons in a react component that will allow me to show or hide some piece of data based on which ever button I click. I have a toggle animation that will set two different icon states (show &amp; hide)</p>
  <h3>set state</h3>
  <p>Here's how I set my state: <code>const [clicked, setClicked] = useState(false);</code></p>
  <h3>handle click</h3>
  <p>The function that toggles the click event</p>
  <pre><code>  const handleClick = () =&gt; {
      setClicked(s =&gt; !s);
    };
  </code></pre>
  <h3>button toggle</h3>
  <pre><code>          &lt;Button className={style.selector} onClick={handleClick}&gt;
              {clicked ? (
                &lt;img src={off} alt=&quot;hidden&quot; /&gt;
              ) : (
                &lt;img src={on} alt=&quot;visible&quot; /&gt;
              )}
              {
                &lt;FormattedMessage
                  id=&quot;side_properties&quot;
                  defaultMessage={&quot;BUTTON 1&quot;}
                /&gt;
              }
            &lt;/Button&gt;
  
        // other buttons below with the same format.
  </code></pre>
  <p>The toggle icon function works, however when a single button is clicked, the icon changes on all of the remaining buttons. How do I limit this click event to a single button?</p>