1

Long story short I am practicing how to use react components with event listeners and handlers. Below is a code that I've developed: 

var Frame = React.createClass({

    getInitialState: function() {
    return {hover: false}
    },

    toggleHover: function(e) {
        this.setState({
            hover: !this.state.hover
        })
    },

    render: function() {
        if (this.state.hover){
            linkStyle = "blue";
        }else{
            linkStyle = "red";
        }

        var frameStyle = {
            width: 100,
            height: 100,
            backgroundColor: {this.props.linkStyle}
        };

        return (
            <div onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover} style={frameStyle}>
            </div>
        );
    }
});

What I'm trying to do here is simple. If the mouse enters my div component it changes color. But I feel like I am not changing the CSS property correctly. I assumed that if I create a property for backgroundColor and put it on a conditional statement it would work perfectly.

Improve this question
1
  • because you have used this.props.linkStyle use linkStyle instead if there is no such this.props for your component. Commented Sep 24, 2017 at 5:59

2 Answers 2

Reset to default
1

Why you need to use JS event listeners for hover effect?

There is CSS native support for hover effect. Give your div a class and in css add the following code:

.my-div {
  color: black;
}

.my-div:hover {
  color: red;
}
<div class="my-div">Text here</div>

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

Comments

1 
class Frame extends Component {

  state = { hover: false };

  toggleHover() {
    this.setState(previousState => {
      return {hover: !previousState.hover};
    });
  }

  render() {

    const frameStyle = {
      width: 100,
      height: 100,
      backgroundColor: this.state.hover ? 'blue' : 'red'
    }

    return (
      <div
        onMouseEnter={this.toggleHover.bind(this)}
        onMouseLeave={this.toggleHover.bind(this)}
        style={frameStyle}>
      </div>
    );
  }
}

This does what you want, I changed it to use more current React syntax though. Some notes:

  • The createClass function is deprecated and for your own sake in the future, your React components should be made either with the class syntax or just as a plain function that returns JSX.
  • You can set the initial state when you use the class syntax with the 'constructor' function, or you could do the shorthand version I used here.
  • When modifying the state using a value from the state itself (like {hover: !state.hover}), you should use the previousState argument with setState instead of using the state's value directly.
Improve this answer

3 Comments

Whoa! That is a totally new syntax for ReactJS! I never seen that before. Although I do somewhat understand what's going on but I do have a couple of questions. I didn't know that you can use ternary operators within your css properties! Why did you declare the css property variable as a const? What does the (previousState =>) within out setState function signify and how is it allowed to be outside of the {} braces?
Hey Ken, I was new to react about 3 months ago also, so I recommend getting used to es6 style classes and moving away from React.CreateClass as that will be deprecated, if not already. => is shortcode in ES6, so you should be able to look that one up under fat arrow functions in javascript. As for the setState call, there's several ways to overload it or send it a callback, look that up as well.
Where did you learn Es6? I am interested, do you have a reference where they can break down how each syntax works, barney style?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.