Problems with "active" Reactjs

Asked

Viewed 87 times

2

I’m trying to create a state to set an icon like active changing its color, but I am failing miserably for having little knowledge.

I created a state with the useState and I set the value true by default to be able to test if it would work.

On my icon, I passed active={active} and in my styles, I picked him up as:

Styled-Components:


svg{
   color: ${props => props.active ? 'cornumero1' : 'cornumero2'};
}

index js.:

<li>
 <Icon.GoGraph size={20} active={active} />
 <p>Gestão de cobrança</p>
</li>

I’m missing something or forgetting something, because the icon comes directly on else, that is, how false.

How to solve?

react react-hooks styled-components

  • Looking at what you posted, it seems to be all right. You have to see if this active property is really inside that component where you have svg, you see?

  • @Carlosquerioz Got it, you really shouldn’t have it because it’s the "React-icons" package... but then, how would I create it ? 'Cause I’m wearing about 20 icons on the page.

  • I think one of the possibilities is you extend the icone in the Styled-Component, like const StyledIcon = styled(Icon) and pass the equal attribute speaks in the documentation. const StyledIcon = styled(Icon).attrs(props => ({color: props.active ? cor1 : cor2})

  • Carlos Thank you so much for the attention man, I’ll see if I get your way later, I managed to solve as follows, I passed the props in the item, you were right, the icon there did not accept this proposal, then I passed the parent tag... and I already extended that same logic to assign values to BEFORE and AFTER, interesting that works the content with variables.

1 answer

1


My problem was I was passing the props in Icon, the correct is in <li> as a new component and I thank everyone who helped me and especially Carlos Queiroz who guided me.

Ending:

index js.:

<Item active={active}>
  <Icon.GoGraph size={20} />
  <p>Gestão de cobrança</p>
</Item>

Styles:

export const Item = styled.li`
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  cursor: pointer;
  svg {
    transition: 0.3s ease;
    color: ${props => (props.active ? '#47B248' : '#939393')};
  }`

Browser other questions tagged react react-hooks styled-components

You are not signed in. Login or sign up in order to post.