Appended React Native component not rerendering
<p>I'm attempting to write a function to remove a React Native component (named "Card") from the DOM on-click, then append a new "Card" of the same class with different properties. For example, both Cards have background colors. If the first Card is green, the second Card, which should have a blue background, will inherit the green background of the original Card. </p>

<p>The Cards receive their background color passed as props, like so: </p>

<pre><code>class Card extends Component {
  constructor(props) {
  super(props);
  this.state = {
    style: {
     backgroundColor: this.props.card.backgroundColor
    }
  };
}

render() {
  return (
    &lt;TouchableHighlight style={this.state.style}&gt;
      &lt;Image source={this.props.card.img} /&gt;
    &lt;/TouchableHighlight&gt;
  )
 }
}
</code></pre>

<p>The main component looks like this: </p>

<pre><code>class SetProject extends Component {

  constructor(props) {
    super(props);
    this.state = {
      cardArray: [{backgroundColor: 'green', img: require('~/SetProject/cardImages/ovals/1-red-empty-oval.png')}]
    }
  }

  removeCard(){
    let emptyArray = [];
    this.setState({cardArray: emptyArray});
  }

  changeCard(){
    // let emptyArray = [];
    // this.setState({cardArray: emptyArray});
    let newCardArray = [{backgroundColor: 'red', img: require('~/SetProject/cardImages/ovals/1-purple-shaded-oval.png')}]
    this.setState({cardArray: newCardArray});
  }

  render() {
    let cardElementArray = this.state.cardArray.map(theCard =&gt; {
      return (
        &lt;Card card={theCard}&gt;&lt;/Card&gt;
      );
    });

    return (
      &lt;View&gt;
        &lt;View&gt;
          {cardElementArray}
        &lt;/View&gt;
        &lt;TouchableHighlight&gt;
          &lt;Text onPress={this.removeCard.bind(this)}&gt;Remove Card&lt;/Text&gt;
        &lt;/TouchableHighlight&gt;
        &lt;TouchableHighlight&gt;
          &lt;Text onPress={this.changeCard.bind(this)}&gt;Change Background&lt;/Text&gt;
        &lt;/TouchableHighlight&gt;
      &lt;/View&gt;
    );
  }
}
</code></pre>

<p>So I've got two buttons: removeCard, which works great, and changeCard. If I press "Remove Card" and then press "Change Card," I see the exact results I'm looking for. The card is removed and is replaced by a new one. However, if I comment in these lines in changeCard:</p>

<pre><code>// let emptyArray = [];
// this.setState({cardArray: emptyArray});
</code></pre>

<p>and press "Change Card" without pressing "Remove Card," the new Card has a new image but it keeps the background color of the previous Card. This also happens if I call this.removeCard() from changeCard.</p>

<p>In summary, I'd like to be able to perform the behavior of both of these functions simultaneously, but I'm only able to remove a Card and add a new, correctly rendered Card if I press both buttons separately. </p>

<p>Any ideas would be much appreciated!</p>