1

I want to use a useState hook to change the color of my react icons to blue in my sidebar upon clicking one of them. I tried this

const [changeColor, setChangeColor] = useState('blue');

and then in the return

<IconOuter onClick={() => setChangeColor(changeColor)}>
  
  {item.icon}

I would like to know what I am doing wrong? Any help would be greatly appreciated. Thank you.

Upon further inspection, I styled using component styles, so this is my css for the icon. It looks like theres a span surounding the icons which may be easier to style.

const IconOuter = styled.span`
  background-color: white;
  border-radius: 5px;
  padding: 10px;
  width: 44px;
  height: 44px;
  left: 8px;
  top: 8px;
`;

4 Answers 4

1

When using the useState hook you create a variable and a method, the variable is used to store the state and the method to change the value of the variable. The variables initial value is gained from the value inside the useState hook and you can change that value latter by using the method you defined from the useState hook

This is the basic form of the useState hook:

const [state, setState] = UseState(<initial state>)

So your code should be :

const [myColor, setmyColor] = useState('white'); //the color is currently white

<IconOuter onClick={() => setColor('blue')} />

const IconOuter = styled.span`
  background-color: ${ myColor };
  border-radius: 5px;
  padding: 10px;
  width: 44px;
  height: 44px;
  left: 8px;
  top: 8px;
`;
2
  • Hi, thanks for getting back to. I just tried this but it seems like its not working. This is what I did const [changeColor, setChangeColor] = useState('white'); and this is my return return ( <> <SidebarLink to={item.path} onClick={showSubnav}> <IconOuter onClick={() => setChangeColor('blue')}> {item.icon} </IconOuter> </SidebarLink> </> ); }; maybe its because I already have an onclick above?
    – Mahier
    Jul 21, 2021 at 10:32
  • @Mahier a codesandbox would be more helpful. Jul 21, 2021 at 11:06
0

I can see that the default value for this state is blue and in your code, you just call setChangeColor and pass 'blue' again so if you click on it again and aging, still state is blue since you just pass 'blue' to your changeColor state method(setChangeColor()). So I can just see that the state gets the same value as the default value all the time. You haven't put the rest of the code but in this small piece of code that you have shared here, I can see that you are not using this state value anywhere.

0

You can try inline CSS as

<IconOuter onClick={()=>setChangeColor('blue')} style={{color:changeColor}}/>

If you want component style try using color instead of background-color in CSS.

0

Here is an example that can be helpful. In this case, I want to update the colour of my heart IonIcon when a user clicks on it once, so I first wrapped it in touchableOpacity to get that blink effect. If you don't want to wrap it, you simply put the onPress function inside the icon.

function MyComponent= () => {
    const [defaultcolor, setNewColor] = useState('white')
    return (
        <View>
            <TouchableOpacity style={styles.MyRoundButtonStyle} onPress={() => 
                  setColor('green')} >
                <Ionicons name="heart" size={50} color={defaultcolor} />
            </TouchableOpacity>
        </View>
)};

export default MyComponent;

Note that in the IonIcons I did not make color='green' etc, I rather used the name of the initial state of the state hook (defaultcolor). Note that it is just a name that you can set to anything like 'mycolor' etc. You may be familiar with the naming convention that is something like [state, setState], it is just a choice.

Do let me know if you need more clarity with this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.