score:1

Accepted answer

you can use :hover effect to change background image.

score:1

trying explicitly passing the state you want instead of toggling it.

toggleicon = ismouseover => this.setstate({ ismouseover });
...
onmouseenter={() => this.toggleicon(true)}
onmouseexit={() => this.toggleicon(false)}

score:1

const normalicon = () => (<div> normal </div>)
const infoicon = () => (<div> info </div>)

class thing extends react.component {
  state = { ismouseover: false };
  
  toggleicon = () => this.setstate(prevstate => ({ ismouseover: !prevstate.ismouseover }));
  render = () => {
    const { ismouseover } = this.state;
    
    return (
      <div
        onmouseenter={this.toggleicon}
        onmouseleave={this.toggleicon}
      >
        {ismouseover ? <infoicon /> : <normalicon />}
      </div>
    )
  }
}

reactdom.render(<thing />, document.getelementbyid("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root" />

looks to be working as expected. i changed your setstate in toggleicon to use a function instead of an object, but other than that, it seems fine...


Related Query

More Query from same tag