Change style on MouseOver event in reactJS, functional component

Question

I have a component and three div tag's in it. In one of the div tag, I created onMouseOver event and trying to change color of text onMouseOver.

React onMouseOver, onMouseEnter events and style are changing dynamically in React.

import React from 'react'

function Middle() {
    const styles = {


        'text-align': 'center',
        'padding': '30px',
    }
    function myName() {
        styles.color = "green"

    }
    function noName() {

    }

    return (
        <div className="middle">

            <div id="cspace" style={styles} onMouseEnter={myName} onMouseLeave={noName}>
                <h1>Hello World</h1>
            </div>

        </div>
    )
}

export default Middle

I am expecting the color of text in div to be changed. the output I am getting is:

"Cannot add property color, object is not extensible"

Dolliedolloff

Why do you want to use the onMouseOver event? You could just add :hover to the css class of the div and change the color that way. – Riana

1. You can do it with hooks. 2. Look at react-usestyles: github.com/andywer/react-usestyles – Lukey

ideally, to make it work with CSS is the best way – Kenwrick

yes you are right about :hover. I am just trying to understand why css changes are not working in that place after updating object using functions. – Dolliedolloff

Answer 1

For a functional component, this is a good scenario to use useState hook to store the color value.

function App() {
  const [color, setColor] = React.useState("");
  const styles = {
    "text-align": "center",
    padding: "30px",
    color: color
  };

  return (
    <div className="middle">
      <div
        id="cspace"
        style={styles}
        onMouseEnter={() => setColor("green")}
        onMouseLeave={() => setColor("")}
      >
        <h1>Hello World</h1>
      </div>
    </div>
  );
}

See CodeSandbox

Malignity

Answer 2

Instead of doing this with onMouseEnter & onMouseLeave, I would recommed you to go with CSS since those operations are lightweight when compared with the Javascript operations like onMouseEnter & onMouseLeave

function Middle() {
    const styles = {
        'text-align': 'center',
        'padding': '30px',
    }
    return (
        <div className="middle">

            <div id="cspace" style={styles}>
                <h1>Hello World</h1>
            </div>

        </div>
    )
}

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

#cspace:hover{
  color: green;
  cursor:pointer;
}

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

Speedboat

Answer 3

you can do this using css only. try this.

#cspace:hover{color:red;}

Formate

Answer 4

for this case i would use ternary operator

function App() {

  const styles = {
    "text-align": "center",
    padding: "30px"
  }
  const [styleColor, setStyleColor] = React.useState(false);
  function styleOver(){
    setMouseOver(true);
  }
  function styleOut(){
    setMouseOver(false);}

  return (
    <div className="middle">
      <div
        id="cspace"
        style={Object.assign({}, style, {color: styleColor && "green"})}
        onMouseOver={styleOver}
        onMouseOut={styleOut}
      >
        <h1>Hello World</h1>
      </div>
    </div>
  );
}

P