How can I make handleclick operation unique for each icon? For example when click to plus icon, color of all changes to green. But I want only plus icon to change into green.

const [isActive, setIsActive] = useState(false);

  const handleClick = () => {
    setIsActive((current) => !current);
  };

return (

 <div className="list-icons">
                <FaPlus
                  className="plus-icon"
                  style={{
                    color: isActive ? "green" : "",
                  }}
                  onClick={handleClick}
                />
                <FaCheck
                  className="check-icon"
                  style={{
                    color: isActive ? "green" : "",
                  }}
                  onClick={handleClick}
                />
                <FaHeart
                  className="heart-icon"
                  style={{
                    color: isActive ? "green" : "",
                  }}
                  onClick={handleClick}
                />
              </div>
)

CodePudding user response：

The best way to do that is that you should create an array of object for your icons.

For example

const [icons, setIcons] = useState([
   {
     id: 1,
     icon: FaPlus,
     className:"plus-icon",
     isActive: false,
   },
    {
     id: 2,
     icon: FaCheck,
     className:"check-icon",
     isActive: false,
   },
   {
     id: 3,
     icon: FaHeart,
     className:"heart-icon",
     isActive: false,
   },
]);

const handleClick = (id: number) => {
  const newIcons = icons.map((icon) => {
    if(icon.id === id) {
      return {
        ...icon,
        isActive: !icon.isActive,
      }
    }
    
    return icon;
  });
  
  setIcons(newIcons);
};


return (
  <div className="list-icons">
    {icons.map((icon) => {
      const Icon = icon.icon
      return (
      (
        <Icon 
          className={icon.className}
          style={{
            color: icon.isActive ? "green" : "",
          }}
          onClick={() => handleClick(icon.id}
        />
      )
    })
  </div>
)

CodePudding user response：

You should use an array of boolean:

  const [isActive, setIsActive] = useState([false, false, false]);
  const handleClick = (index) => {
    setIsActive((current) => {
      current[index] = !current[index];
      return current;
    });
  };

return (

 <div className="list-icons">
                <FaPlus
                  className="plus-icon"
                  style={{
                    color: isActive[0] ? "green" : "",
                  }}
                  onClick={() => handleClick(0)}
                />
                <FaCheck
                  className="check-icon"
                  style={{
                    color: isActive[1] ? "green" : "",
                  }}
                  onClick={() => handleClick(1)}
                />
                <FaHeart
                  className="heart-icon"
                  style={{
                    color: isActive[2] ? "green" : "",
                  }}
                  onClick={() => handleClick(2)}
                />
              </div>
)

CodePudding user response：

const icons = ['plus', 'check', 'heart'];
const components = [<FaPlus />, <FaCheck />, <FaHeart />];

const [activeIcons, setActiveIcons] = useState(icons.map(() => false));

const onActiveToggle = (index) => {
    setActiveIcons(prev => {
        prev[index] = !prev[index];
        return prev;
    });
}

const iconProps = useMemo(() => {
    return icons.map((icon, index) => ({
        className: `${icon}-icon`,
        style: {{ color: activeIcons[index] ? 'green': 'black' }},
        onClick: () => onActiveToggle(index)
    })
}, [activeIcons]);



return (
    <>
        {components.map((Component, index) => (
            <Component {...iconProps[index]}/>
        ))}
    </>
);