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

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: oldCopy });
    console.log("this is the old array", oldCopy);
    console.log(...this.state.currentHand);

    const newCardChoice = this.state.currentHand[index];
    this.setState({ newCardChoice: newCardChoice });
    console.log("this is the new array of the 1 chosen card", newCardChoice);

    console.log(this.state.currentHand);
    const newCopy = this.state.currentHand.splice(index, 1);
    this.setState({ newCopy: newCopy });
    const updatedHand = Object.assign({}, this.state.currentHand);
    this.setState({ updatedHand: updatedHand });
    
    console.log(
      "newCopy is broke. I wanted it to show the new hand.. it shows the card cut out.",
      newCopy
    );
    console.log(this.state.currentHand);
    console.log("this is the updatedHand", updatedHand);

    //THIS IS A MESS I NEED TO TIGHTEN UP THE AOVE and make sure it all gets to state.  tired.
  }

  render() {
    const myHand = this.state.currentHand.map((card, index) => {
      return (
        <div
          key={card.toString()}
          onClick={() => this.clickHandler(index)}
          >
          card {currentHand} and index {index}
        </div>
      );
    });
    return (
      <div>
        This is my Handd..
        {myHand}
        This is the card I chose..
        {this.state.newCardChoice}
        
      </div>
    );
  }
}
ReactDOM.render(<Hand />, document.getElementById("container"));