How to hide a react bell icon without creating a separate component?

Question

I am trying to show an icon when i double click an element. Here is my project

https://codesandbox.io/s/brave-herschel-s092nm?file=/src/App.js

I know there is one option to create another component, but I think that is not necessary, because it is just a single icon i want to change, is there another simpler way to change the state ?

updated sandbox link

Answer 1

Something like this:

import Icon from "/your/Icon/component";

export default function MyApp() {
  const [isIconVisible, setIsIconVisible] = React.useState(false);

  function handleClick(e) {
    if (e.detail === 2) {
      setIsIconVisible(oldState => !oldState);
    }
  }

  return (
    <div>
      <button onClick={handleClick}>Show/hide icon</button>
      {isIconVisible && <Icon />}
    </div>
  );
}