title: How to set property in React state array of objects
body: <p>I have 2 React components Memory and children MemoryShape</p>
  
  <p>At the Memory component i have method newGame which setting 4 random MemoryShapes to the purple color when i clicking on button, but when i clicked all shapes got purple color not 4 that i wants</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import './memory.css';
  import MemoryShape from './MemoryShape';
  import randomShape from './helpers/help';
  
  class Memory extends Component {
    constructor(props) {
      super(props);
      this.state = {
        memoryshapes: new Array(16).fill(Math.random() * 1321132),
  
  
      };
  
      this.preInitGame = this.preInitGame.bind(this);
  
      this.newGame = () =&gt; {
        const [...shapes] = this.state.memoryshapes;
        const coloredShapesIndexes = randomShape(4, 15);
        coloredShapesIndexes.forEach((value) =&gt; {
          shapes[value].shape.style.backgroundColor = 'purple';
        });
  
        console.log(shapes);
        this.setState({ memoryshapes: shapes });
      };
    }
  
    componentWillMount() {
      this.preInitGame();
    }
  
  
    preInitGame() {
      let [...memoryshapes] = this.state.memoryshapes;
      const data = {
        shape: {
          style: {
            setColor(nextColor) {
              this.backgroundColor = nextColor;
            },
            backgroundColor: 'green',
          },
        },
      };
      memoryshapes = memoryshapes.map((value) =&gt; {
        let newValue = value;
        newValue = data;
  
        return newValue;
      });
  
      this.setState({ memoryshapes });
    }
  
  
    render() {
      const shapes = this.state.memoryshapes.map((value, index) =&gt; {
        const arrkey = index + value;
        return (&lt;MemoryShape
          key={arrkey}
          tabIndex={index}
          backgroundColor={value.shape.style.backgroundColor}
        /&gt;);
      });
      return (
        &lt;div&gt;
          {shapes}
          &lt;br /&gt;
          &lt;button
            style={{
              padding: 20,
              marginLeft: 300,
            }}
            onClick={this.newGame}
          &gt;
            Start Game
          &lt;/button&gt;
          &lt;MemoryShape
            tabIndex={-124}
            backgroundColor="blue"
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Memory;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class MemoryShape extends Component {
    constructor(props) {
      super(props);
      this.state = { backgroundColor: 'green' };
  
      this.changeColor = () =&gt; {
  
      };
      this.handleKeyDown = () =&gt; {
  
      };
    }
    componentWillReceiveProps(nextProps) {
      console.log(nextProps.backgroundColor);
      this.setState({ backgroundColor: nextProps.backgroundColor });
    }
  
  
    render() {
      return (
        &lt;div
          className="memory-shape"
          onKeyDown={this.handleKeyDown}
          onClick={this.changeColor}
          role="button"
          tabIndex={this.props.tabIndex}
          backgroundColor={this.props.backgroundColor}
          style={{ backgroundColor: this.state.backgroundColor }}
        /&gt;
      );
    }
  }
  
  MemoryShape.propTypes = {
    backgroundColor: PropTypes.string,
    tabIndex: PropTypes.number.isRequired,
  };
  MemoryShape.defaultProps = {
    backgroundColor: 'transparent',
  };
  
  export default MemoryShape;</code></pre>
  </div>
  </div>
  </p>