How to enable hover in ReactJS

Question

I have here code made in ReactJS.

import React, { Component } from "react";

class Sidebar extends Component {
  state = {
    hovered: false
  };

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

  render() {
    const { hovered } = this.state;
    if (hovered) {
      return (
        <div
          className="flex-container justify-content-end"
          style={{
            display: "flex",
            textDecoration: "none",
            listStyleType: "none"
          }}
          onMouseOver={this.onMouseOver}
        >
          <div className="col-sm-12 col-md-4">
            <ul className="nav flex-column nav-pills">
              <li
                className="nav-item"
                style={{ padding: "0.5em", backgroundColor: "#809fff" }}
              >
                {" "}
                <a
                  href="prva_divizija.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  PRVA DIVIZIJA
                </a>
              </li>
              <li
                className="nav-item"
                style={{
                  padding: "0.5em"
                }}
              >
                {" "}
                <a
                  href="druga_divizija.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  DRUGA DIVIZIJA
                </a>
              </li>
              <li className="nav-item" style={{ padding: "0.5em" }}>
                <a
                  href="treca_divizija.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  TRECA DIVIZIJA
                </a>
              </li>
              <li className="nav-item" style={{ padding: "0.5em" }}>
                <a
                  href="cetvrta_divizija.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  CETVRTA DIVIZIJA
                </a>
              </li>
              <li className="nav-item" style={{ padding: "0.5em" }}>
                <a
                  href="peta_divizija.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  PETA DIVIZIJA
                </a>
              </li>
              <li className="nav-item" style={{ padding: "0.5em" }}>
                <a
                  href="divizija_tuzla.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  DIVIZIJA TUZLA
                </a>
              </li>

              <li className="nav-item" style={{ padding: "0.5em" }}>
                <a
                  href="divizija_sarajevo.html"
                  style={{
                    backgroundColor: "#ff6666",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  DIVIZIJA SARAJEVO
                </a>
              </li>

              <li
                className="nav-item"
                style={{
                  padding: "0.5em"
                }}
              >
                <a
                  href="divizija_bugojno.html"
                  style={{
                    backgroundColor: "#ff6666",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  DIVIZIJA BUGOJNO
                </a>
              </li>
            </ul>
          </div>
        </div>
      );
    }

https://pastebin.com/zYQ4rFxE

The code is suppose to hover when I go over with mouse on the labels. But it doesn't work for some reason. Can I ask for guidance for this solution? I don't ask for finished solution.

Answer 1

As far as I know, react does not have a hovered state for a element (like CSS does). However you can use the onMouseEnter and onMouseLeave events to determine if your event is being hovered over and update the state accordingly

See this answer for an example implementation: react show button on mouse enter