One thing that’s worth remembering about React is that when you’re updating state, only the Render method gets re-executed.
It’s easy (as I did) to fall into the trap of doing something like this:
const myStyle = { background: this.props.backgroundFlag == 1 ? "blue" : "yellow", display: 'inline-block', height: '100%', } public render() { return <> <div className="myDiv" style={myStyle}> </> }
Imagine that this.props.backgroundFlag is actually the state of the containing component; when you change it, you would expect your component to reflect your change. However, in the case above, what will actually happen is nothing – because only the render method is re-evaluated when the virtual DOM changes.
To correct this, you need whatever needs to be re-evaluated inside the render method; for example:
public render() { const myStyle = { background: this.props.backgroundFlag == 1 ? "blue" : "yellow", display: 'inline-block', height: '100%', } return <> <div className="myDiv" style={myStyle}> </> }