title: How can I force React to re-render all components on a page that come from array.map?
body: <p>I have a parent component (Game) that renders children (Card) from an array. I also have a Menu component that does a callback to Game to change its state. When I change levels (button click from Menu), I want all current cards to fade out, then fade in with the new ones, so they mimic the fade-in CSS applied to newly rendered Cards. I've tried forceUpdate in a couple places, and passing dummy props to check for a change. Basicly, I want all cards currently on the page to re-render while the page renders new ones when needed.</p>
  
  <p>Here is a snippet from Game:</p>
  
  <pre><code>{this._gameArray.map( (item, i) =&gt; {
    let dummyProp = Math.random();
    return &lt;Card key={i}
             ...
             dummyProp={dummyProp}/&gt;
  })}
  </code></pre>
  
  <p>And a snippet from Card:</p>
  
  <pre><code>componentWillReceiveProps(nextProps) {
    ...
    if (nextProps.dummyProp !== this.props.dummyProps) {
      this.forceUpdate();
    }
  }
  </code></pre>
  
  <p>I'm using componentWillReceiveProps for another purpose, and decided to try it for testing the dummyProp change. The new Cards fade in, but the ones before do not do anything.</p>