CODEWITHSUNDEEP
javascriptreactjs
GibboK
GibboK

Reputation: 73908

ReactJs warning: Mutating `style` is deprecated. Consider cloning it beforehand

I am receving the following warning:

inWarning: `div` was passed a style object that has previously been mutated. Mutating `style` is deprecated. Consider cloning it beforehand. Check the `render` of `xxx`. Previous style: {backgroundColor: "#000000"}. Mutated style: {backgroundColor: "#002a09"}.

When trying to assign a style property to a div even after cloning the original object (I have also tried using JSON.parse(JSON.stringify()) with no sucess).

Could you tell me why I am receiving this error and how to fix it.

   var clone = Object.assign({}, this.state.selectedColor);
   this.styles.previewColorHover.backgroundColor = clone.hex

in my render function:

<div ref='previewColor' id={'preview-color-' + this.props.id}
    style={this.styles.previewColorHover}>
</div>

Upvotes: 1

Views: 927

Answers (2)

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

You are not cloning the previewColorHover

  var clone = Object.assign({}, this.styles.previewColorHover);
   this.styles.previewColorHover = clone;
   this.styles.previewColorHover.backgroundColor = this.state.selectedColor.hex

Upvotes: 2

John Peter
John Peter

Reputation: 441

You are cloning the selectedColor object but not the style object.

do something as follows

var clone = Object.assign({}, this.state.selectedColor);
this.styles.previewColorHover.backgroundColor = clone.hex
var style = {};
style["previewColorHover"] = {backgroundColor : clone.hex}

and use the style object in the div as

<div ref='previewColor' id={'preview-color-' + this.props.id}
    style={style.previewColorHover}>
</div>

Upvotes: 1

Related Questions