ReactJS: can not change style with changing state - reactjs

Question

I'm new in ReactJS(in fact I'm learning), I've written a simple code to check the style changing but as my best knowledge when the state change in react it will reRender the component but when I did this it does not happen, so I tried forceUpdate() and this work but the style does not change again,
I've tried this before with a simple state and it worked but when I set my style in an object everything got screwed up, thanks for any help
class Check extends React.Component {
constructor(props) {
super(props);
this.state = {
sty: {
width: 200 + 'px',
backgroundColor: 'blue',
height: 200 + 'px', marginBottom: 20 + 'px'
}
}
this.update = this.update.bind(this);
}
update() {
let sty = this.state.sty;
sty.backgroundColor = 'red';
this.setState = ({
sty
})
this.forceUpdate();
}
render() {
console.error(this.state.sty['backgroundColor']);
return (
<div style={this.state.sty} onClick={this.update} id="checkBox" className="First">
<span>{this.props.children}</span>
</div>
)
}
}
ReactDOM.render(
<div>
<Check key={1}>1</Check>
<Check key={2}>2</Check>
<Check key={3}>3</Check>
<Check key={4}>4</Check>
</div>,
document.getElementById('container'))

Answer 1

not use =.Use this.setState({...})
https://reactjs.org/docs/react-component.html#setstate
class Check extends React.Component{
constructor(props) {
super(props);
this.state = {
sty : { width : 200 +'px',
backgroundColor : 'blue',
height: 200 + 'px', marginBottom : 20+'px' }
}
this.update = this.update.bind(this);
}
update(){
this.setState(prevState=>({sty:{...prevState.sty,backgroundColor:'red'}}))
}
render() {
console.error(this.state.sty['backgroundColor']);
return (
<div style={this.state.sty} onClick={this.update} id="checkBox" className="First">
<span>{this.props.children}</span>
</div> )
}
}
ReactDOM.render(
<div>
<Check key={1}>1</Check>
<Check key={2}>2</Check>
<Check key={3}>3</Check>
<Check key={4}>4</Check>
</div>, document.getElementById('container'))

Answer 2

In a React component, setState is a function, you have to call it to use it.
Here is a working example of your code :
class Check extends React.Component {
constructor(props) {
super(props);
this.state = {
sty: {
width: 200 + 'px',
backgroundColor: 'blue',
height: 200 + 'px', marginBottom: 20 + 'px'
}
}
}
update = () => {
this.setState({ sty: {
width: 200 + 'px',
backgroundColor: 'red',
height: 200 + 'px', marginBottom: 20 + 'px'
}
});
}
render() {
return (
<div style={this.state.sty} onClick={this.update} id="checkBox" className="First">
<span>{this.props.children}</span>
</div>
)
}
}
ReactDOM.render(
<div>
<Check key={1}>1</Check>
<Check key={2}>2</Check>
<Check key={3}>3</Check>
<Check key={4}>4</Check>
</div>,
document.getElementById('container'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.0/umd/react-dom.production.min.js"></script>
<div id='container'/>
A good practice would rather be to use CSS styling and make your components className vary based on his state