Hide a component when another is hovered - reactjs

Question

I'm using Gatsby for a static website.
My page is composed of two parts. Section 1 and Section 2.
I want to hide an image in Section 1, when a button is hovered in Section 2.
If I clean up a bit my .js, it looks like that :
<section>
<SomeText/>
<DefaultImage />
<ImageOne />
<ImageTwo />
</section>
<section>
<Button1/>
<Button2/>
</section>
What I want to achieve:
By default, <DefaultImage/> is shown.
If I hover <Button1>, I want to hide <DefaultImage/> and display <ImageOne/> instead.
Same goes for <Button2/>, which, when hovered, should hide <DefaultImage/> and display <ImageTwo/>.
I've read about onMouseEnter and onMouseLeave, and I think that the answer lies there but couldn't make it work for now.
Thank you for your ideas!
Maybe I can also pass a prop (like a css class) on the "to be hidden" component when the other is hovered
I managed to do it (check the accepted answer).
Here is my edited code:
class Parent extends Component {
state = {
isHoveringImage1: false
}
state = {
isNotHovering: false
}
state = {
isHoveringImage2: false
}
startHoverMasque = () => this.setState({ isHoveringMasque: true, isNotHovering: true})
stopHoverMasque = () => this.setState({ isHoveringMasque: false, isNotHovering: false })
startHoverMains = () => this.setState({ isHoveringMains: true, isNotHovering: true})
stopHoverMains = () => this.setState({ isHoveringMains: false, isNotHovering: false })
render() {
return (
<>
<Global
styles={globalStyles}/>
<section>
{
this.state.isNotHovering
? <ImageDefaultHidden />
: <ImageDefault/>
}
{
this.state.isHoveringImage1
? <Image1 />
: <ImageDefaultHidden />
}
{
this.state.isHoveringImage2
? <Image2 />
: <ImageDefaultHidden />
}
</section>
<section>
<Button1
onMouseEnter={ this.startHoverImage1}
onMouseLeave={ this.stopHoverImage1 }
>Bouton1</Button1>
<Button2
onMouseEnter={ this.startHoverImage2}
onMouseLeave={ this.stopHoverImage2 }
>Bouton 2</Button2>
</section>
</>
)
}
}
export default Parent```

Answer 1

You can annotate when the mouse enter and leaves the target Button in the state of your parent component:
class Parent extends Component {
state = {
isHovering: false
}
startHover = () => this.setState({ isHovering: true })
stopHover = () => this.setState({ isHovering: false })
render() {
return (
<>
<section>
<SomeText/>
{
this.state.isHovering
? <ImageOne />
: <DefaultImage />
}
<ImageTwo />
</section>
<section>
<Button1
onMouseEnter={ this.startHover }
onMouseLeave={ this.stopHover }
/>
<Button2/>
</section>
</>
)
}
}

Answer 2

The solution is to include the variable saying whether or not your image should be rendered in your parent component's state.
To set this variable, pass down a function to the component containing the button and bind it to the events you gave in your question : onMouseEnter and onMouseLeave.
Working example :
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
hideImage: false
}
}
toggleImage = hideImage => ev => {
this.setState({ hideImage })
}
render = () => {
return(
<div>
<ButtonComponent hovered={this.toggleImage}/>
<ImageComponent isHidden={this.state.hideImage}/>
</div>
)
}
}
const ButtonComponent = ({ hovered }) => <button onMouseEnter={hovered(true)} onMouseLeave={hovered(false)}>Hover me :)</button>
const ImageComponent = ({ isHidden }) => <img hidden={isHidden} src='https://reactjs.org/logo-og.png'/>
ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom.production.min.js"></script>
<div id='root'>