ReactJS does not update the conditional CSS class when hovering with mouseOnEnter or mouseOnOver

Question

ReactJS does not update the conditional CSS class when hovering with mouseOnEnter or mouseOnOver

I am currently attempting to showcase data in a table where each row features an info icon that is only visible upon hovering. Additionally, I want a pop-up to appear when the info icon is clicked (there is an onclick function assigned to this button).

Here's a snippet of the code I've written for this purpose:

<td className="reportCard">
   {filteredVehicles.map(t =>
    <tr className="cardList" onMouseEnter={() => this.onClickReportRow(t.reportId) }>
          <span className="CardReportsName"><p className="reportNameP" >{t.reportName}</p></span>
          <span style={PreviewBtn} className={this.selectedReportId == t.reportId ? "previewBtnDisplayBlock" : "previewBtnDisplayNone"}>
                 <em className="fa fa-info" aria-hidden="true" onClick={() => this.showPopUp()} />
             </span>
        </tr>
       )}
      </td>

 onClickReportRow(reportId){
        this.selectedReportId= reportId
    }

Unfortunately, even though the hover event is triggered when I hover over a row, the conditional class does not change as expected. It seems to work fine if I use onclick, but when combined with Font Awesome's onclick, it fails to update the class.

This problem is quite perplexing and I'm unsure about the root cause.

Thank you in advance.

javascript css reactjs react-native react-redux

Answer 1

Answer №1

Identified Issue: The issue lies in this line of code: this.selectedReportId == t.reportId

Resolution: It appears that this.selectedReportId is not a function, but rather a variable. To properly compare the reportId, you need to create a state that can be updated on mouseEnter or Leave events. This will allow you to accurately track and modify the selectedReportId.

Helpful Link:Visit this link for more details

import React, { Component } from "react";
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";
const element = <FontAwesomeIcon icon={faCoffee} />;
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filteredVehicles: [
        {
          reportId: 1,
          reportName: "One"
        },
        {
          reportId: 2,
          reportName: "TWO"
        }
      ],
      selectedReportId: null,
      popUp: false
    };
  }
  onClickReportRow = (ID) => {
    this.setState({ selectedReportId: ID });
  };
  showPopUp = () => {
    this.setState({ popUp: !this.state.popUp });
  };
  handleonMouseLeave = () => {
    this.setState({ selectedReportId: "" });
  };
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <table>
          <td className="reportCard">
            {this.state.filteredVehicles.map((t) => (
              <tr
                className="cardList"
                onMouseEnter={() => this.onClickReportRow(t.reportId)}
                onMouseLeave={() => this.handleonMouseLeave()}
              >
                <span className="CardReportsName">
                  <p className="reportNameP">{t.reportName}</p>
                </span>
                <span
                  className={
                    this.state.selectedReportId === t.reportId
                      ? "previewBtnDisplayBlock"
                      : "previewBtnDisplayNone"
                  }
                >
                  {element}
                </span>
              </tr>
            ))}
          </td>
        </table>
        {this.state.popUp ? (
          <div
            class="modal fade"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            Required PopUp
          </div>
        ) : null}
      </div>
    );
  }
}

export default App;

Answer 2

Identified Issue: The issue lies in this line of code: this.selectedReportId == t.reportId

Resolution: It appears that this.selectedReportId is not a function, but rather a variable. To properly compare the reportId, you need to create a state that can be updated on mouseEnter or Leave events. This will allow you to accurately track and modify the selectedReportId.

Helpful Link:Visit this link for more details

import React, { Component } from "react";
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";
const element = <FontAwesomeIcon icon={faCoffee} />;
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filteredVehicles: [
        {
          reportId: 1,
          reportName: "One"
        },
        {
          reportId: 2,
          reportName: "TWO"
        }
      ],
      selectedReportId: null,
      popUp: false
    };
  }
  onClickReportRow = (ID) => {
    this.setState({ selectedReportId: ID });
  };
  showPopUp = () => {
    this.setState({ popUp: !this.state.popUp });
  };
  handleonMouseLeave = () => {
    this.setState({ selectedReportId: "" });
  };
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <table>
          <td className="reportCard">
            {this.state.filteredVehicles.map((t) => (
              <tr
                className="cardList"
                onMouseEnter={() => this.onClickReportRow(t.reportId)}
                onMouseLeave={() => this.handleonMouseLeave()}
              >
                <span className="CardReportsName">
                  <p className="reportNameP">{t.reportName}</p>
                </span>
                <span
                  className={
                    this.state.selectedReportId === t.reportId
                      ? "previewBtnDisplayBlock"
                      : "previewBtnDisplayNone"
                  }
                >
                  {element}
                </span>
              </tr>
            ))}
          </td>
        </table>
        {this.state.popUp ? (
          <div
            class="modal fade"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            Required PopUp
          </div>
        ) : null}
      </div>
    );
  }
}

export default App;

ReactJS does not update the conditional CSS class when hovering with mouseOnEnter or mouseOnOver

Answer №1

Similar questions

Guide to implementing input fields in a form in React.js when the user chooses the "Other" option from a dropdown menu

Issues with IE 11: SVG Map Not Triggering Mouseenter or Mouseleave Events

What are the steps for effectively utilizing the EmChart to achieve precise font sizes in ems?

Warnings from Webpack may appear while running the Next.js development server

VSTS is having a sluggish performance when running the npm build process

Using multiple conditions in an angular ngif statement to create a variable

Ways to prevent body content from overlapping with footer content and appearing below

Adjust the height of the div container and implement a vertical scroll feature on the fixed element

JS custom scrollbar thumb size issues in relation to the scroll width of the element

Utilizing the Pub/Sub architecture to integrate the kafka-node library within Node Js

How can I retrieve the selected value from an Angular 2 dropdown menu when it changes, in order to utilize it within a function?

Sentry alert: Encountered a TypeError with the message "The function (0 , i.baggageHeaderToDynamicSamplingContext) does not

Problem with React Material UI syled-engine resolution inconsistency during test execution (Functions properly during serve/build process)

What is the best method to implement a loading spinner within a React and Node application while using Nodemailer?

Utilizing Javascript for logging into Facebook

The PHP on server could not be loaded by Ajax

Any tips on making Angular 8's sort table function seamlessly integrate with data retrieved from Firebase?

Form submission is not possible while the login form is active

Can an array be generated on-the-fly with objects contained within it?

Utilizing Bootstrap to arrange table cells in a shifted manner