title: Why can't I pass an object to state using setState?
body: <p>I have been staring at the same piece of code for the last 2 hours and cannot see why my setState in the onReveal() method is not updating the state of the constructor. I have checked and I do seem to be creating a valid object (revealedArray) but this does not seem to be being passed to the state whatever I do. </p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import './App.css';
  
  const Card = (props) =&gt; {
    return &lt;div 
      key={props.id} 
      className="Card" 
      style={props.cardState===CardState.hidden ? {backgroundColor: "dimGrey"} : {backgroundColor: props.colour}}
      onClick={() =&gt; {props.onReveal(props.id)}}
    &gt;
      Hello from {props.colour} Card number {props.id}. cardState is {props.cardState}
    &lt;/div&gt;;
  }
  
  Card.propTypes = {
    onReveal: PropTypes.func.isRequired,
  };
  
  class CardHolder extends Component {
      static propTypes = {
        cards: PropTypes.arrayOf(PropTypes.object).isRequired,
      }
      render() {
          const {onReveal} = this.props;
          const AllCards = this.props.cards.map((r, index) =&gt; (
            &lt;Card key={r.id} {...r} onReveal={onReveal}/&gt;
          ));
          return (
              &lt;div className="Board"&gt;
                {AllCards}
              &lt;/div&gt;
          );
  
      }
  }
  
  const CardState = {
    hidden: 0,
    visible: 1,
    paired: 2
  }
  
  class App extends Component {
    constructor(props){
      super(props);
      this.state = {
        cards:  [
                  {id: 0, cardState: CardState.hidden, colour: "red"},
                  {id: 1, cardState: CardState.hidden, colour: "red"},
                  {id: 2, cardState: CardState.hidden, colour: "blue"},
                  {id: 3, cardState: CardState.hidden, colour: "blue"},
                ]
      };
      this.onReveal = this.onReveal.bind(this);
    }
  
    onReveal(id) {
      const revealedArray = this.state.cards.map((val, ind) =&gt; 
        (val.id === id ? 
          (val = {id: id, cardState: CardState.visible, colour: val.colour}) : (val = val)
        )
      );
      this.setState({revealedArray}, function() {
        console.log(this.state.cards);
      });
    }
  
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;div className="header"&gt;
            &lt;h1&gt;
              Memory Game
            &lt;/h1&gt;
            &lt;a&gt;&lt;h3&gt;
              New Game
            &lt;/h3&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div className="body"&gt;
            &lt;CardHolder cards={this.state.cards} onReveal={this.onReveal}/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Thanks so much for the help.</p>