Within my parent component (Game), I am rendering child components (Card) from an array. Additionally, there is a Menu component that triggers a callback to Game in order to change its state. When switching levels (via a button click on the Menu), I want all existing cards to smoothly fade out and then fade back in with new ones, mirroring the fade-in effect applied to freshly rendered Cards. In attempts to achieve this, I have experimented with forceUpdate at various points and even tried passing dummy props to detect any changes. Essentially, I aim to trigger re-renders for all cards currently displayed on the page while simultaneously rendering new ones as needed.
Below is a snippet taken from Game:
{this._gameArray.map( (item, i) => {
let dummyProp = Math.random();
return <Card key={i}
...
dummyProp={dummyProp}/>
})}
In addition, here is an excerpt from Card:
componentWillReceiveProps(nextProps) {
...
if (nextProps.dummyProp !== this.props.dummyProps) {
this.forceUpdate();
}
}
Although I initially utilized componentWillReceiveProps for another purpose, I decided to experiment with it to monitor changes in the dummyProp. Subsequently, the new Cards are observed fading in smoothly, while the pre-existing ones remain unaffected by the transition.