Adding a css class in React through event handlers

Question

I was trying to add a css class on mouse over just as mentioned in the react documentation but I am not sure why it is not working. Please help

index.js:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  let className = "";
  return (
    <div className="App">
      <h1
        className={className}
        onMouseOver={() => {
          if (!className.includes("colorRed")) {
            className += " colorRed";
          }
        }}
      >
        Hello CodeSandbox
      </h1>
    </div>
  );
}

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

style.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.colorRed{
  color:red;
}

Link: https://codesandbox.io/s/xjx72w5kkw?fontsize=14

Hi. Your example in codesanbox is.. "empty", it's just the base react template of codesandbox. Can you explain better your question and correct the example? — Jolly
– Jolly, Commented Mar 15, 2019 at 8:06
The link you shared has a standard template for a react project. Where is your code? Consider adding it here. — tomerpacific
– tomerpacific, Commented Mar 15, 2019 at 8:06
You are missing :hover in your class css decleration. You class should be .App:hover { font-family: sans-serif; text-align: center; } — Hassan Imam
– Hassan Imam, Commented Mar 15, 2019 at 8:08
are you expecting a solution like this stackblitz.com/edit/react-ubf5al ? — Jayavel
– Jayavel, Commented Mar 15, 2019 at 8:14

Jamie Dixon · Accepted Answer · 2019-03-15 08:26:29Z

1

This issue here is that you're mutating the className variable but this alone doesn't cause React to re-render your component.

You'll need to store the className in the state so that when you change it, React knows to re-render your component.

Here's a version of your sandbox making use of state: https://codesandbox.io/s/m51qoq72pp

// First we're importing useState from react
// This is part of the new Hooks mechanism 
// More about hooks: https://reactjs.org/docs/hooks-intro.html
// You could also use a class and this.setState instead
import React, { useState } from "react";

// Then we set up our piece of state
const [className, setClassName] = useState("");

// Your event now uses setState
onMouseOver={() => {
  if (!className.includes("colorRed")) {
   setClassName(current => current + " colorRed");
  }
}}

edited Mar 15, 2019 at 8:26

answered Mar 15, 2019 at 8:22

Jamie Dixon

54.1k21 gold badges131 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding a css class in React through event handlers

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related