CODEWITHSUNDEEP
javascriptcssreactjsevent-handlingmouseover
Krishna M
Krishna M

Reputation: 61

Change style on MouseOver event in reactJS, functional component

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"

Upvotes: 6

Views: 20870

Answers (4)

Dimitriy07
Dimitriy07

Reputation: 1

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>
  );
}

Upvotes: 0

Joseph D.
Joseph D.

Reputation: 12174

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

Upvotes: 8

Harsh Makadia
Harsh Makadia

Reputation: 3443

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>

Upvotes: 3

Sumit Patel
Sumit Patel

Reputation: 4638

you can do this using css only. try this.

#cspace:hover{color:red;}

Upvotes: 2

Related Questions