How to change react icons while clicking it?

Question

I have some icons from react-icons that I want to change from outline to filled whenever I click it but instead of changing itself, it changes all the icons from outline to filled.

Here is my code

function Header() {
  const [isActive, setIsActive] = useState(false);
  return (
    ....
    <div className="flex items-center space-x-6">
      <div className="cursor-pointer select-none">
       {isActive? <AiOutlineHome onClick={()=>{
          setIsActive(!isActive)}}/>:
      <AiFillHome onClick={()=>{
          setIsActive(!isActive)}} />
           }
      </div>

    <div className="cursor-pointer select-none">
      {isActive?<MdOutlineAddBox onClick={()=>{
       setIsActive(!isActive)}}/>:
         <MdAddBox onClick={()=>{
       setIsActive(!isActive)}} />}
     </div>
....
  )}

I know it's because they are sharing the same isActive state, but I don't know exactly how to fix it. Can someone please help me with this?

Edit:

function HeaderIcon({ Icon, ActiveIcon }) {
  const [isActive, setIsActive] = useState(false);
  return (
    <div>{isActive ? <Icon /> : <ActiveIcon />}</div>
  );
}

export default HeaderIcon;

I put this component in a new file but how can I pass the onClick to it?

Place each icon pair into a new component,. Then each will have its own stare. Avoid using multiple states in same component for performance reasons. — Keith, Jun 09 '22 at 14:12
Splitting components into sub sections is really one of its best features, and also has performance benefits due to how rendering updates work, eg. This might help -> https://stackoverflow.com/questions/66590082/how-to-prevent-re-rendering-of-components-that-have-not-changed — Keith, Jun 09 '22 at 14:19
Close @CheeThong. Here's a modified version. https://codesandbox.io/s/great-mendel-2tdwsf?file=/src/App.js. It's just personal preference, but I like passing the entire component. That way it can be controlled outside of the reusable component. — Dennis Martinez, Jun 09 '22 at 14:51
thank you all for the solutions you gave, I finally solved it WHOOOHOOOOOO!!!!! — Chee Thong, Jun 09 '22 at 15:06

score 1 · Accepted Answer · answered Jun 09 '22 at 14:07

You need to use two different state

function Header() {
  const [isActive, setIsActive] = useState(false);
  const [isActive2, setIsActive2] = useState(false);
  return (
    ....
    <div className="flex items-center space-x-6">
      <div className="cursor-pointer select-none">
       {isActive? <AiOutlineHome onClick={()=>{
          setIsActive(!isActive)}}/>:
      <AiFillHome onClick={()=>{
          setIsActive(!isActive)}} />
           }
      </div>

    <div className="cursor-pointer select-none">
      {isActive2?<MdOutlineAddBox onClick={()=>{
       setIsActive2(!isActive2)}}/>:
         <MdAddBox onClick={()=>{
       setIsActive2(!isActive2)}} />}
     </div>
....
  )}

I hope this will do magic

It works but I want to make a custom component to do this, isn't it a better way? But I just don't know how :/ — Chee Thong, Jun 09 '22 at 14:15

score 1 · Answer 2 · answered Jun 09 '22 at 15:13

1

The answer for this is:

import React, { useState } from "react";

function HeaderIcon({ inactiveIcon, activeIcon }) {
 const [isActive, setIsActive] = useState(false);

 return (
   <div onClick={() => setIsActive(!isActive)}>
     {isActive ? activeIcon : inactiveIcon}
   </div>
 );
}

export default HeaderIcon;

Then pass in the icon you want.

answered Jun 09 '22 at 15:13

Chee Thong

51
2
7

1

I would also go one more deeper, React's strength is composabilty, so using your HeaderIcon you could create 2 more components called HomeIcon & AddBoxIcon with the props already passed, even if there only going to be used once, I think it makes the JSX cleaner.. – Keith Jun 09 '22 at 15:46

How to change react icons while clicking it?

2 Answers2