title: How to implement hover effect without mutating style directly?
body: <p>I have a React component that has an implemented hover effect, as such:</p>
  
  <pre><code>let style = {
    backgroundColor: "blue"
  }
  
  class someComponent extends React.Component{
  
    constructor(props){
      super(props)
  
      this.state = {
        hover: false
      }
    }
  
    handleHover(event) {
      this.setState({ hover: true });
    }
  
    handleExit(event) {
      this.setState({ hover: false });
    }
  
    render(){
      if(this.state.hover){
        style.backgroundColor = "red"
      } else {
        style.backgroundColor = "blue"
      }
  
      return(
        &lt;Segment style={style} onMouseEnter={this.handleHover} onMouseLeave={this.handleExit} /&gt;
      );
    }
  }
  </code></pre>
  
  <p>However, even though it does work, I get an error saying: </p>
  
  <blockquote>
    <p>Warning: <code>div</code> was passed a style object that has previously been
    mutated. Mutating <code>style</code> is deprecated. Consider cloning it
    beforehand. Check the <code>render</code> of <code>Segment</code>.</p>
  </blockquote>
  
  <p>I looked up the answer from this <a href="https://stackoverflow.com/questions/33295615/why-was-mutating-style-deprecated">post</a>, and it says to implement it this way:</p>
  
  <pre><code>const {styleFromProps} = this.props;
  
  const newStyle = {...styleFromProps, marginTop: '45px'};
  </code></pre>
  
  <p>However, my style is defined outside of the class, and I'm not passing any styling down from the parent component. So I'm not too sure how to implement this answer into my current code.</p>
  
  <p><strong>Question(s):</strong> </p>
  
  <ul>
  <li>Is that answer the best way to implement a hover effect, or should I clone the component like the error suggests?</li>
  <li>How should I implement the answer into my current component? The structure can be changed if necessary.</li>
  </ul>