Challenge and Code: Card Component

15Dkatz · Oct 24, 2022 · ec34051 · ec34051
1 parent 33a8f5f
commit ec34051
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/evens-or-odds/src/components/App.js b/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>
           ) : (

diff --git a/evens-or-odds/src/components/Card.js b/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);