title: ReactJs - TypeError: Cannot assign to read only property 'transform' of object '#<Object>'
body: <p>I was planning to change the inline css by hovering the element.
  But react freaked out cuz all the properties of the 'style' object in this class are somehow all readonly.</p>
  
  <p>But it is fine to modify it in 'render' method.
  I searched the error message, many people get this error message by modifying the props object.But this one is not even in the props object.
  Any ideas?</p>
  
  <p>Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  
  export default class Game extends Component {
     state = {
  
     }
  
     style = {
        height: '200px',
        backgroundImage: 'url()',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        transform: 'scale(1)'
     }
  
     onHover() {
        this.style.transform = 'scale(1.2)';
     }
  
     render() {
        const { game, onClick } = this.props;
        const { img, name } = game;
        this.style.backgroundImage = `url(${img})`;
        this.style.transform = 'scale(1)';
        return (
           &lt;div className="m-2"
              style={this.style}
              onClick={() =&gt; { onClick(this.props.game) }}
              onMouseEnter={() =&gt; this.onHover()}
           &gt;{name}&lt;/div&gt;
        );
     }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can't attach images yet, so here's the link for the error message.</p>
  
  <p><a href="https://i.stack.imgur.com/THBm4.png" rel="noreferrer">Error message screenshot</a></p>