Fin P2Ch3 - Événements

src/App.js

@@ -5,16 +5,24 @@ import Card from './Card'
 import GuessCount from './GuessCount'
 
 class App extends Component {
+  handleCardClick(card) {
+    console.log(card, 'clicked')
+  }
+
   render() {
     return (
       <div className="memory">
         <GuessCount guesses={0} />
-        <Card card="😀" feedback="hidden" />
-        <Card card="🎉" feedback="justMatched" />
-        <Card card="💖" feedback="justMismatched" />
-        <Card card="🎩" feedback="visible" />
-        <Card card="🐶" feedback="hidden" />
-        <Card card="🐱" feedback="justMatched" />
+        <Card card="😀" feedback="hidden" onClick={this.handleCardClick} />
+        <Card card="🎉" feedback="justMatched" onClick={this.handleCardClick} />
+        <Card
+          card="💖"
+          feedback="justMismatched"
+          onClick={this.handleCardClick}
+        />
+        <Card card="🎩" feedback="visible" onClick={this.handleCardClick} />
+        <Card card="🐶" feedback="hidden" onClick={this.handleCardClick} />
+        <Card card="🐱" feedback="justMatched" onClick={this.handleCardClick} />
       </div>
     )
   }

src/Card.js

@@ -4,8 +4,8 @@ import './Card.css'
 
 const HIDDEN_SYMBOL = '❓'
 
-const Card = ({ card, feedback }) => (
-  <div className={`card ${feedback}`}>
+const Card = ({ card, feedback, onClick }) => (
+  <div className={`card ${feedback}`} onClick={() => onClick(card)}>
     <span className="symbol">
       {feedback === 'hidden' ? HIDDEN_SYMBOL : card}
     </span>