React JS - cloneElement example? - reactjs

Question

When I change the inline style of a component depending on the state, I get this error.
Warning: `div` was passed a style object that has previously been mutated. Mutating `style` is deprecated.
In my render function, I'm calling this function before the return, to check a property.
this._isGameOver();
_isGameOver:
_isGameOver()
{
if (this.props.gameOver === false)
{
style.well.backgound = '#f5f5f5';
style.h1.color = '#32936F';
}
else
{
style.well.background = 'red';
style.h1.color = 'white';
}
}
So where and how do I use this clone? The documentation doesn't give any solid examples.
Sean

Answer 1

No need for cloneElement in your example, simply return a new style object instead of mutating the existing one.
_isGameOver() {
if (this.props.gameOver === false) {
return {
well: { background: '#f5f5f5' },
h1: { color: '#32936F' }
}
}
else return {
well: { background: 'red' },
h1: { color: 'white' }
}
}
Then you can merge the new styles with the old styles wherever you need using something like Object.assign
var newStyle = this._isGameOver()
return <h1 style={Object.assign({}, style.h1, newStyle.h1)} />

Answer 2

I'm guessing that you're defining that style object outside of your component (perhaps importing it?). So wherever you're going to modify that style you need to make a clone of it.
I always import as baseStyles (to indicate it shouldn't be mutated) and use lodash.cloneDeep() (because cloning deep objects is fiddly to do yourself).
So your function becomes
import cloneDeep from 'lodash/cloneDeep';
import baseStyle from '../blah/yourStyle.js';
_isGameOver()
{
const style = cloneDeep(baseStyle);
if (this.props.gameOver === false)
{
style.well.backgound = '#f5f5f5';
style.h1.color = '#32936F';
}
else
{
style.well.background = 'red';
style.h1.color = 'white';
}
}
You could also do something like:
const wellStyle = {
...style.well,
background: '$f5f5f5',
}
and then pass wellStyle to your component rather than style.well.
It might not suit your situation, but I only change styles inside the actual render method. It keeps everything in the one place (cloning your import in more than one place won't work).