title: Change style on MouseOver event in reactJS, functional component
body: <p>I have a component and three div tag's in it. In one of the <code>div</code> tag, I created <code>onMouseOver</code> event and trying to change color of text <code>onMouseOver</code>. </p>
  
  <p>React <code>onMouseOver</code>, <code>onMouseEnter</code> events and style are changing dynamically in React.</p>
  
  <pre><code>import React from 'react'
  
  function Middle() {
      const styles = {
  
  
          'text-align': 'center',
          'padding': '30px',
      }
      function myName() {
          styles.color = "green"
  
      }
      function noName() {
  
      }
  
      return (
          &lt;div className="middle"&gt;
  
              &lt;div id="cspace" style={styles} onMouseEnter={myName} onMouseLeave={noName}&gt;
                  &lt;h1&gt;Hello World&lt;/h1&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      )
  }
  
  export default Middle
  </code></pre>
  
  <p>I am expecting the color of text in div to be changed. 
  the output I am getting is:</p>
  
  <blockquote>
    <p>"Cannot add property color, object is not extensible"</p>
  </blockquote>