How can I render comonents depending of what am I hovering in ReactJS?

Question

I can render 1 component but is there another way to render others components depending what am I hovering?

constructor(props) { super(props) this.handleMouseHover = this.handleMouseHover.bind(this) this.state={ isHovering: false } } handleMouseHover(){ this.setState(this.toggleHoverState) } toggleHoverState(state) { return { isHovering:!state.isHovering } }

<a href="#" onMouseEnter={this.handleMouseHover} onMouseLeave={this.handleMouseHover}>Hover me1</a> <a href="#" onMouseEnter={this.handleMouseHover} onMouseLeave={this.handleMouseHover}>Hover me2</a>

{isHovering && (<Component/>)}

Does this answer your question? How can I access a hover state in reactjs? — Karim Chaari
– Karim Chaari, Commented May 4, 2021 at 1:46

Nithish · Accepted Answer · 2021-05-04 02:18:04Z

You can use switch if you have more than one element to display based on hovering of one element.

Below in the example I have considered 3 anchor elements and added corresponding mouse over and mouse out event handlers in order to display the corresponding hovered element below them.

const {useState} = React; const App = () => { const [hoveredOn, setHoveredOn] = useState(-1); const getElement = () => { switch(hoveredOn) { case 0: return <p>Hovered Element 0</p> case 1: return <p>Hovered Element 1</p> case 2: return <p>Hovered Element 2</p> } } const onMouseOver = (index) => { setHoveredOn(index); } const onMouseOut = () => { setHoveredOn(-1); } return ( <div> <a href="#" onMouseOver={() => {onMouseOver(0)}} onMouseOut={onMouseOut}>Element 0</a> <a href="#" onMouseOver={() => {onMouseOver(1)}} onMouseOut={onMouseOut}>Element 1</a> <a href="#" onMouseOver={() => {onMouseOver(2)}} onMouseOut={onMouseOut}>Element 2</a> {getElement()} </div> ) } ReactDOM.render(<App />, document.getElementById("react"));

a { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="react"></div>

You can also add a default case to the switch case in order to display a default component or any message as well based on your requirement.

Will Walsh · Accepted Answer · 2021-05-04 01:46:52Z

To conditionally show a different component depending on if isHovering is true or false, this should work.

Change

{isHovering && (<Component/>)}

to

{isHovering ? (<Component1/>) : (<Component2/>)}

This will display <Component1/> if true, and <Component2/> if false.

Collectives™ on Stack Overflow

How can I render comonents depending of what am I hovering in ReactJS?

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related