Increment number of displayed gifs on each failed attempt. Fixes #8

src/App.js

@@ -14,6 +14,7 @@ class App extends React.Component {
     this.state = {
       gifs: [],
       mysteryWord: "",
+      attempt: 0,
     };
   }
 
@@ -38,18 +39,29 @@ class App extends React.Component {
     this.setState({
       mysteryWord,
       gifs,
+      attempt: 0,
     });
   };
 
+  handlePlayerAnswer = (playerAnswer) => {
+    const { mysteryWord, attempt } = this.state;
+    if (playerAnswer === mysteryWord) {
+      alert("you win!");
+    } else {
+      this.setState({ attempt: attempt + 1 });
+      alert("you lose...");
+    }
+  };
+
   render() {
-    const { gifs, mysteryWord } = this.state;
+    const { gifs, attempt } = this.state;
     return (
       <div className="App">
-        <PlayerInput mysteryWord={mysteryWord} />
+        <PlayerInput handlePlayerAnswer={this.handlePlayerAnswer} />
         <button type="button" onClick={this.play}>
           Reset
         </button>
-        <GifList gifs={gifs} />
+        <GifList gifs={gifs} length={attempt + 1} />
       </div>
     );
   }

src/components/gif_list.jsx

@@ -1,15 +1,17 @@
-import React from 'react'
-import Gif from './gif'
+import React from "react";
+import Gif from "./gif";
 
-class GifList extends React.Component {
-    render() {
-        const {gifs} = this.props;
-        return (
-            <ul>
-                {gifs.map(({url, id}) => <li key={id}><Gif url={url} key={id} /></li>)}
-            </ul>
-        )
-    }
-}
+const GifList = (props) => {
+  const { gifs, length } = props;
+  return (
+    <ul>
+      {gifs.slice(0, length).map(({ url, id }) => (
+        <li key={id}>
+          <Gif url={url} key={id} />
+        </li>
+      ))}
+    </ul>
+  );
+};
 
-export default GifList
+export default GifList;

src/components/player_input.jsx

@@ -11,10 +11,9 @@ class PlayerInput extends React.Component {
   };
 
   handleSubmit = (event) => {
-    const { mysteryWord } = this.props;
+    const { handlePlayerAnswer } = this.props;
     const { playerAnswer } = this.state;
-    const message = mysteryWord === playerAnswer ? "you win!" : "you lose...";
-    alert(message);
+    handlePlayerAnswer(playerAnswer);
     event.preventDefault();
   };