What if in componentDidMount I need to render a react element in the dom?

Question

JavaScript

Hello, my idea was the following:

componentDidMount () {
    this.setControls();
  }

  setControls = () => {
    const gears = this.__box.querySelectorAll( '.inputRange__track > span' );

    gears.forEach( ( gear, index ) => {

      gear.addEventListener( 'mouseenter', () => this.setRedGear( gear ) );
      gear.addEventListener( 'mouseleave', () => this.setBlackGear( gear ) );
    } );
  }

  setRedGear = ( gear ) => {
    const item = gear.querySelector( '.inputRange__slider' );

    const svgIcon = <Svg src={ gear } />

    item.appendChild( svgIcon );
  }

I want to render to the div I need - `gear.querySelector( '.inputRange__slider' )`
this div is created by the react-input-range module.

Answer 1

JSX component code and HTML elements are completely different things. You can't do that.
Your task, in a good way, is solved by one css rule:

.my-svg-selector:hover {
  fill: red;
}