How to trigger a re-rendering of my Icon Component in React?

Question

SOLUTION

Remove the style={{ fill: 'green' }} from the component and add this to the css file:

/*index.css*/
/* INFO: the sidebarleft-button contains a child that is an <svg> */
.sidebarleft-button-active > * {
  fill: rgb(192, 192, 192);
}

.sidebarleft-button:hover > * {
  fill: rgb(192, 192, 192);
}

PROBLEM(That is now solved)

I am working on a SideBar for my Application. The Sidebar contains Buttons. Each Button contains an Icon. I want to change the color of the icon if I hover with my mouse over the button. I tried many things and I wonder why no re-rendering is triggered because the icon changed and a change means re-rendering. I can see that the style.fill gets changed to blue in the inspector window of my browser.

I show you my code. The comments inside the code may help you.

//sideBarLeft.jsx
import React, { useState } from 'react';

import SideBarButton from './sideBarButton';
import { DIAGRAMTYPE } from '../diagramComponent/diagramUtils';

import { ReactComponent as BarChartIcon } from '../../icon/barChart.svg';

const SideBarLeft = (props) => {
  const [btn0Active, setBtn0Active] = useState(true);
  const [btn1Active, setBtn1Active] = useState(false);

  const deactivateOtherButtonsAndActiveThisButton = (
    idOfButtonThatWasClicked
  ) => {
    switch (idOfButtonThatWasClicked) {
      case 0:
        setBtn1Active(false);
        setBtn0Active(true);
        break;
      case 1:
        setBtn0Active(false);
        setBtn1Active(true);
        break;
      default:
        setBtn0Active(false);
        setBtn1Active(false);
    }
  };

  return (
    <div className={'sidebarleft'}>
      <SideBarButton
        active={btn0Active}
        id={0}
        deactivateOtherButtonsAndActiveThisButton={
          deactivateOtherButtonsAndActiveThisButton
        }
        icon={<BarChartIcon style={{ fill: 'green' }} />}
        diagramType={DIAGRAMTYPE.barChartPos}
      />
      <SideBarButton
        active={btn1Active}
        id={1}
        deactivateOtherButtonsAndActiveThisButton={
          deactivateOtherButtonsAndActiveThisButton
        }
        icon={<BarChartIcon style={{ fill: 'green' }} />}
        diagramType={DIAGRAMTYPE.barChartWordOccurence}
      />
    </div>
  );
};

export default SideBarLeft;

import React, { useState, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../state/index';

const SideBarButton = (props) => {
  const dispatch = useDispatch();
  const { switchToDiagramType } = bindActionCreators(actionCreators, dispatch);

  const [cssClass, setCssClass] = useState('sidebarleft-button');
 const onClickFn = () => {
    props.deactivateOtherButtonsAndActiveThisButton(props.id);
    switchToDiagramType(props.diagramType);
  };

  const [icon, setIcon] = useState(props.icon);
  const buttonHandler = () => {};

  const onMouseEnter = (component) => {
    console.log('in onMouseEnter()');
    const classOfComponent = component.target.classList.value;
    if (classOfComponent === 'sidebarleft-button-active') {
      console.log('component is active');
    } else if (classOfComponent === 'sidebarleft-button') {
      console.log('before');
      console.log(props.icon); //even without mousenter, the component is already blue...
      let changedIcon = props.icon;
      props.icon.props.style.fill = 'blue';
      setIcon(changedIcon); //in the inspector
      //there is props->style->fill == 'blue'
      //why does it not get rendered then in blue???
      console.log('after');
      console.log(changedIcon);
      console.log('component is not active');
      // console.log(component);
    }
  };

  console.log('beforebefore');
  console.log(icon);

  return (
    <button
      onClick={onClickFn}
      className={cssClass}
      onMouseEnter={(component) => onMouseEnter(component)}
    >
      {icon}
    </button>
  );
};

export default SideBarButton;

Answer 1

Why not a css or sass approach?

.sidebarleft-button-active {
  &:hover {
    fill: blue;
  }
}