React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

const InnerCard = (props) => {
  const newDate = new Date().getTime();
  
  // HERE: the callback to .map() takes three parameters... the current item, the index, and the array
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
  //
  // The third parameter you've named as 'i' is really an array, so you can't use it to index into an array.
  //
  //
  const badInnerOptions = props.cardSelected.map((cardSelected, index, i) => {
    return (
      <div key={cardSelected[i]} onClick={() => this.clickHandler(index)}>
        card {cardSelected} and index {index}
      </div>
      );
  });
  
  // instead, you can just simply use the index as the key
  const goodInnerOptions = props.cardSelected.map((cardSelected, index) => {
    return (
      <div key={index} onClick={() => this.clickHandler(index)}>
        card {cardSelected} and index {index}
      </div>
    );
  });
// NEW PROBLEM i am not getting a unique Key .. this is creating an error every time the array values are identical.. 2,2 3,3 1,1

    console.log(props.cardSelected, 'here here');
    //for (let [key, value] of Object.entries())

    return (
      <div>
                
        <div>InnerCard props:</div>
        
        <pre style={{backgroundColor: '#ddd'}}>{JSON.stringify(props, null, 2)}</pre>
        
        <div>{goodInnerOptions}</div>
      </div>
    );
}

class Hand extends React.Component {
  constructor(){
    super();
    this.state = {
      currentHand: [
        [1, 1],
        [1, 2],
        [1, 3],
        [2, 1],
        [2, 2],
        [2, 3],
        [3, 1],
        [3, 2],
        [3, 3]
      ],
      oldCurrentHand: [],
      newCurrentHand: [],
      theCardPicked: [],
      oldCopy: [],
      newCopy: [],
      updatedHand: [],
      newCardChoice: []
    };
  }
  

  clickHandler(index) {

    // lets slice and splce again here
    const oldCopy = Object.assign({}, this.state.currentHand);
    this.setState({ oldCopy:...