ReactJs - TypeError: Cannot assign to read only property 'transform' of object '#<Object>'

Question

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.

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?

Here's my 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 (
         <div className="m-2"
            style={this.style}
            onClick={() => { onClick(this.props.game) }}
            onMouseEnter={() => this.onHover()}
         >{name}</div>
      );
   }
}

Can't attach images yet, so here's the link for the error message.

Error message screenshot

Is it possible that "style" is a reserved property of components, and hence is treated as read only? Sorry, I've not seen this readonly issue before, so am curious if renaming "style" to something else would work. — Chris Cousins
– Chris Cousins, Commented Sep 3, 2018 at 4:15
Unfortunately that's the first thing I've tried, but didn't work. I figured it out by Bhojendra Rauniyar's answer below. Thanks <3. — Hao Wu
– Hao Wu, Commented Sep 3, 2018 at 4:49

Bhojendra Rauniyar · Accepted Answer · 2018-09-03 04:23:05Z

4

The only way to update the property in react is to update the state with setState. Alternatively, you should place them inside the render hook itself or where you require them:

render() {
  const { game, onClick } = this.props;
  const { img, name } = game;
  const style = {
      height: '200px',
      backgroundImage: 'url()',
      backgroundSize: 'cover',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      transform: 'scale(1)'
   }
  // now, you can modify
  style.backgroundImage = `url(${img})`;
  style.transform = 'scale(1)';

Or, even you may place them outside the class: (This would be preferred method in your case because, you're updating the properties in desired methods)

const style = {
   height: '200px',
   backgroundImage: 'url()',
   backgroundSize: 'cover',
   backgroundRepeat: 'no-repeat',
   backgroundPosition: 'center',
   transform: 'scale(1)'
}
export default class Game extends Component {
  render() {
    // modifying style
    style.backgroundImage = `url(${img})`;
    style.transform = 'scale(1)';

edited Sep 3, 2018 at 4:23

answered Sep 3, 2018 at 4:16

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

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

2 Comments

Hao Wu Over a year ago

That's it! I put the style object inside of the render method, then modify the transform by a flag value inside of the state object which is modified by onHover method. Everyting works as it should be now. Thanks!

Nikhil Sengar Over a year ago

didn't work if the object is nested for example let styles= { root:{ color:'white' } } received same error

Markus Weber · Accepted Answer · 2020-04-03 21:14:25Z

You can copy your style object and change the copy:

render() {
  const { game, onClick } = this.props;
  const { img, name } = game;

  // make a copy
  let changedStyle = {
    ...this.style
  }

  // change the copy
  changedStyle.backgroundImage = `url(${img})`;
  changedStyle.transform = 'scale(1)';

  return (
     <div className="m-2"
        style={changedStyle}
        onClick={() => { onClick(this.props.game) }}
        onMouseEnter={() => this.onHover()}
     >{name}</div>
  );
}

To make it even cleaner, you could just merge css classes via

style = {
    height: '200px',
    backgroundImage: 'url()',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    transform: 'scale(1)',
}

hoveringStyle = {
    transform: 'scale(1.2)',
}

this.style  = {...style, ...hoveringStyle}

This may have a negative side effect that i don't know about.

Collectives™ on Stack Overflow

ReactJs - TypeError: Cannot assign to read only property 'transform' of object '#<Object>'

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related