How do I change an image on hover
in JSX
I'm trying something like this:
<img src={require('../../../common/assets/network-inactive.png')}
onMouseOver={this.src = require('../../../common/assets/network.png')}
onMouseOut={this.src = require('../../../common/assets/network-inactive.png')} />
I will assume you are writing this code in a React component. Such as:
class Welcome extends React.Component {
render() {
return (
<img src={require('../../../common/assets/network-inactive.png')}
onMouseOver={this.src = require('../../../common/assets/network.png')}
onMouseOut={this.src = require('../../../common/assets/network-inactive.png')}
/>
);
}
}
Targeting this.src
will not work in this case as you are essentially looking for something named src
in your class. For instance this.src
could find something like this:
src = () => (alert("a source"))
But that is not what you want to do. You want to target the image itself.
Therfore you need to enter the <img />
context. You can do that easily like this:
<img
onMouseOver={e => console.log(e)}
/>
From there you can target the currentTarget
property, among others. This will enter the context of your element. So now you can do something like this:
<img
src="img1"
onMouseOver={e => (e.currentTarget.src = "img2")}
/>
The same can be done for onMouseOut
.
You can use this same method on your other elements, as you will certainly need to do this again. But be careful as this is a not the only solution. On bigger projects you may want to consider using a store (Redux), and passing props rather than mutating elements.