How to change the style of one element when I hover another element (ReactJS)?

Question

So basically when i hover over "drive" option which is a h1, i want a div container to appear that contains several other in detail options. Then if i click on "ride" option which is another h1, i want a div to appear as well that has more details and options. Only one can be chosen at a time, either ride/drive, but if i hover over ride, then the div that appears needs to stay until the mouse is off the div, if i hover over drive, then the drive div needs to appear. Hope you guys can help! Here is my code

import React, { Component } from 'react';
import './App.css';

class Header extends Component {
  render() {
    return (
      <div className="Nav">
        <header className="Nav-header">
          <h1 className="Nav-title">Halcon</h1>
          <p className="Nav-drive"><a href="*" className="Nav-link" onMouseEnter={this.mouseOver.bind(this)} onMouseLeave={this.mouseOut.bind(this)}>Drive</a></p>
          <p className="Nav-seperator">|</p>
          <p className="Nav-ride"><a href="*" className="Nav-link">Ride</a></p>
        </header>
         // Div i want to appear if Drive is hovered
        <div className="Drive-toggle">
          <h3>Why drive with us?</h3>
          <h3>Safety</h3>
          <h3>Requirements to Drive</h3>
          <h3>Driver App</h3>
          <h3>Driver - Log In</h3>
        </div>
        // Div i want to appear if Ride is hovered
        <div className="Ride-toggle">
          <h3>Why drive with us?</h3>
          <h3>Safety</h3>
          <h3>Requirements to Drive</h3>
          <h3>Driver App</h3>
          <h3>Driver - Log In</h3>
        </div>

      </div>
    );
  }
}

export default Header;

Sagiv b.g · Accepted Answer · 2018-01-01T08:55:53.477

You can use the state to store a Boolean value of hovered, and use the onMouseEnter and onMouseLeave to update the state.

Then you can render a style, a CSS class or a component conditionally.

Here is a small running example:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hovered: false
    };
  }

  onMouseEnter = e => {
    this.setState({ hovered: true });
  };

  onMouseLeave = e => {
    this.setState({ hovered: false });
  };

  render() {
    const { hovered } = this.state;
    const style = hovered ? { backgroundColor: "#333", color: "#fff" } : {};
    return (
      <div>
        <div onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
          Hover over me!
        </div>
        <hr />
        <div style={style}>Was it hovered?</div>
        <hr />
        {hovered && <div>Yes!!</div>}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

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

Your solution is OK, but use a function in setState, instead only an Object. If you use Objects, they may lead you to unexpected results. See here for additional info: https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b — suther, Jan 01 '18 at 10:04
The unexpected behavior will mostly depends if you use the updated state before it has actually updated. As for using this pattern in this answer is somewhat irrelevant in my opinion. — Sagiv b.g, Jan 01 '18 at 10:15

How to change the style of one element when I hover another element (ReactJS)?

1 Answers1

Linked