title: Can I change my css style properties from a render conditional function in reactJS?
body: <p>Long story short I am practicing how to use react components with event listeners and handlers. Below is a code that I've developed: </p>
  
  <pre><code>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 (
              &lt;div onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover} style={frameStyle}&gt;
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>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. </p>