title: Toggle icon color upon button click using React Hooks
body: <p>I'm a newbie to React. I'm trying to update the like or bookmark count to <code>0</code> and <code>1</code> upon button click. When I click on the bookmark icon, both the icons gets toggled. The behavior seems inconsistent.</p>
  <p><strong>ToggleIcon Component</strong></p>
  <pre><code>const ToggleIcon = ({ icon, color, styledIcon, handleClick }: any) =&gt; {
    return (
      &lt;IonIcon icon={color ? styledIcon : icon} onClick={handleClick}&gt;&lt;/IonIcon&gt;
    );
  };
  </code></pre>
  <p><strong>Root Component</strong></p>
  <pre><code>  {config.map((props, index) =&gt; (
      &lt;ToggleIcon
        style={{ padding: &quot;10px&quot; }}
        handleClick={() =&gt; {
          setColor(!color);
  
          if (props.type === &quot;bookmark&quot;) {
             !color &amp;&amp; props.type === &quot;bookmark&quot;
             ? setBookmarkCount(bookmarkCount + 1)
             : setBookmarkCount(bookmarkCount - 1);
          }
  
          if (props.type === &quot;like&quot;) {
              !color &amp;&amp; props.type === &quot;like&quot;
              ? setLikeCount(likeCount + 1)
              : setLikeCount(likeCount - 1);
          }
        }}
        color={color}
        {...props}
       /&gt;
    ))}
  </code></pre>
  <p>I created a working example using <a href="https://codesandbox.io/s/serverless-butterfly-brezp?file=/src/pages/Tab1/Tab1.tsx" rel="nofollow noreferrer">CodeSandbox</a>. Could anyone please help?</p>