How do I use Toggle method in Reactjs ? I have added sandbox link at the bottom-CodePudding

In this code, I want to toggle active class to icons div, I watched some youtube videos and they showed this method which is not what I want, this method does not add activeclass to a particular div it adds active class to every div that has icons class. I want whenever someone click onto the div active class should be added into it and when clicked again that class should get removed.

export default function Site() {
  const [notActive, setActive] = useState(false);

  const switchActive = () => {
    notActive ? setActive(false) : setActive(true);
  };

  return (
    <div id="container">
      <nav id="navbar">
        <a href="j" className="link">
          Buzzify
        </a>
        <a href="f">
          <FaRegUserCircle className="user-icon" />
        </a>
      </nav>
      

 
     
      <div id="playlist-container">
        <div id="playlist">
          <div
            className={notActive ? "icons active" : "icons"}
            onClick={switchActive}
          >
            <BsCloudRain />
            <VolSlider />
          </div>
          <div
            className={notActive ? "icons active" : "icons"}
            onClick={switchActive}
          >
            <GiForest />
          </div>
          <div className="icons">
            <MdOutlineWaterDrop />
          </div>
          <div className="icons">
            <BiWind />
          </div>
          <div className="icons">
            <GiCampfire />
          </div>
          <div className="icons">
            <GiThreeLeaves />
          </div>
          <div className="icons">
            <BsMoonStars />
          </div>
          <div className="icons">
            <BiWater />
          </div>
          <div className="icons">
            <BiTrain />
          </div>
          <div className="icons">
            <BiCoffeeTogo />
          </div>
          <div className="icons">
            <FaFan />
          </div>
          <div className="icons">
            <DiDigitalOcean />
          </div>
          <div className="icons">
            <GiWaterfall />
          </div>
          <div className="icons">
            <FaPlane />
          </div>
          <div className="icons">
            <IoIosPlanet />
          </div>
          <div className="icons">
            <GiOctopus />
          </div>
        </div>
      </div>
    </div>
  );
}

CodeSandbox.io

CodePudding user response：

You have two options in order to solve this:

1- You need a state for each icon that keeps track of if you clicked them or not. This could be done by making a React component that represents an icon and then use it to in your Site component:

export default function MyIcon({icon}) {
    const [isActive, setIsActive] = useState(false)
    return <div className={isActive ? "icons active" : "icons"}
                onClick={() => {setIsActive(!isActive)}}>
                {icon}
           </div>
}

You can then use this component in Site() like this:

<MyIcon icon={<CertainIcon/>} />

2- You can programmatically toggle the classname "active" using the onClick event without relying on a state like this:

<div className="icons"
     onClick={(event) => {event.currentTarget.classList.toggle('active')}}>
    <CertainIcon/>
</div>

CodePudding user response：

you should manage state per Icon like

const IconWithState = ({children}) => {
const [isActive, setIsactive] = useState(false)
const toggle = () => setIsactive(curr => !curr)
return  ( 
          <div
            className={active ? "icons active" : "icons"}
            onClick={toggle}
          >
            {children}
          </div>
         )

and then use it like

...
      <div id="playlist-container">
        <div id="playlist">
          <IconWithState>
            <BsCloudRain />
            <VolSlider />
          </IconWithState>
          <IconWithState>
            <GiForest />
          </IconWithState>
   ....