Hi there, and welcome to Hashnode!
There are a couple of issues with your code. Firstly, in order to change the state of a component, you're required to use the method setState(). If you don't use this, React won't do a re-render.
Secondly, you're using componentWillUpdate without if-statements. It's recommended to only update the state within componentWillUpdate if a certain condition is met. Otherwise, a re-render will be triggered every time any prop changes, which is probably not what you want.
In order to fix the problem you're having, you can do something like this:
componentWillUpdate(nextProps) {
if (nextProps.effect !== this.props.effect) {
this.setState({ effect: nextProps.effect })
}
}
However, in your case you probably don't need to use state at all. React automatically re-renders when props change, so if you simply pass the prop to the className attribute, things should work automatically.