ReactJs - TypeError: Cannot assign to read only property 'transform' of object '#<Object>'
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)';