Set react element active

Question

i'm trying to se an element active with a different color, but its not working.Someone could help me ? And if it works, probably every element will change the color, how could i do it with something like "this", or any other. Thats my element and my state:

//-> my state: I used true as default because i was trying to do it works, but i failed

export default function VertNavigation() {

 const [active, setActive] = useState(true);
 console.tron.log(active);
 return (
   <Container>
     <button type="button">DEPOSITAR</button>
     <QuickNavi>
       <VerticalNavigation>
         <Title>ACESSO RÁPIDO</Title>

         <li>
           <Icon.MdMonetizationOn size={20} />
           <p>Emitir Cobrança</p>
         </li>
         <li>
           <Icon.GoGraph size={20} active={active} />
           <p>Gestão de cobrança</p>
         </li>
         <li>
           <Icon.MdCompareArrows size={20} />
           <p>Tranferencia</p>
         </li>
         <li>
           <Icon.FaBarcode size={20} />
           <p>Pagamentos</p>
         </li>

// -> my styled component -- its always in "else", i don't know why
  export const VerticalNavigation = styled.ul`
 width: 100%;
 height: 100%;

 li:nth-child(4)::after {
   content: 'novo';
   right: 0;
   margin-left: 6px;
   text-align: center;
   font-size: 12px;
   top: 10px;
   width: 45px;
   height: 15px;
   background: #47b248;
   color: #fff;
   border-radius: 10px 10px 10px 10px;
 }

 li {
   width: 100%;
   height: 45px;
   display: flex;
   align-items: center;
   cursor: pointer;

   &:hover svg {
     transform: translateY(-5px);
     color: #47b248;
   }

   svg {
     transition: 0.3s ease;
     color: ${props => (props.active ? '#47B248' : '#939393')};
   }

   p {
     padding-left: 15px;
     font-size: 15px;
     color: ${darken(0.5, '#A6A6A5')};
   }
 }
`;

Thank you in advance.

Answer 1

The problem was my Icon like the guys said. I had to create a li component and pass my prop for him, then it works. Thank you everyone for help me.

           ->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')};
  }