La mejor manera de hacerlo es que debe crear una matriz de objetos para sus íconos.

Por ejemplo

 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> )

Debe usar una matriz de valores booleanos:

 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> )

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]}/> ))} </> );