Challenge and Code: Card Component

Author: 15Dkatz

evens-or-odds/src/components/App.js

@@ -5,6 +5,7 @@ import { fetchNewDeck } from '../actions/deck';
 import fetchStates from '../reducers/fetchStates';
 import Instructions from './Instructions';
 import DrawCard from './DrawCard';
+import Card from './Card';
 
 class App extends Component {
   startGame = () => {
@@ -34,6 +35,8 @@ class App extends Component {
               <br />
               <DrawCard />
               <hr />
+              <Card />
+              <hr />
               <button onClick={this.props.cancelGame}>Cancel Game</button>
             </div>
           ) : (

evens-or-odds/src/components/Card.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+const Card = ({ cards }) => {
+  if (!cards[0]) return null;
+
+  const { value, suit, image } = cards[0];
+
+  return (
+    <div>
+      <h3>{value} of {suit}</h3>
+      <img src={image} alt='card-image' />
+    </div>
+  );
+}
+
+export default connect(
+  ({ deck: { cards }}) => ({ cards })
+)(Card);