From afac3370583658f81036c978056f2caf24dad96a Mon Sep 17 00:00:00 2001
From: Tobi Adeniyi <tobiadeniyi@fb.com>
Date: Tue, 17 Jan 2023 11:54:28 +0000
Subject: [PATCH] Update: manage answer button states

---
 README.md                  |  6 +++---
 src/App.js                 | 18 +++++++++++++++++-
 src/components/Question.js |  8 ++++++--
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 5b7a5b0..bd49a01 100644
--- a/README.md
+++ b/README.md
@@ -26,15 +26,15 @@
 2. Use the `Question` component that’s imported into `App` and conditionally render it and pass the question on state to it.
     - **Note**: We’ll have to conditionally render the `<Question />` component. If the data from the API has not yet returned and `this.state.question` is still `null`, we don’t want to render the component yet.
     ```jsx
-    {this.state.question && <Question question={this.state.question}} />}
+    {this.state.question && <Question question={this.state.question} />}
     ```
 3. You’ll notice that `Question` is already rendering an `AnswerButton` component, but clicking on an answer button doesn’t do anything yet. We need to pass `this.handleGuess` to `AnswerButton`.
     - Notice that `handleGuess` expects a single argument of answer to be passed to it. Figure out how we should pass answer into `handleGuess`!
 4. Now that we have the question rendering, answer buttons rendering, and an ability to guess an answer, we need to tell the user if they answered correctly or not!
     - In `Question` below the answers, dynamically render some content!
     - If `this.state.guessed` is truthy, render a `div`
-5. Inside the `div`, if `this.state.guess === this.props.question.correct_answer` then this means the user answered correctly! 
-    - Let them know they are correct by rendering a helpful `“Correct!”` message. 
+5. Inside the `div`, if `this.state.guess === this.props.question.correct_answer` then this means the user answered correctly!
+    - Let them know they are correct by rendering a helpful `“Correct!”` message.
     - If they answered incorrectly, we’ll say `Incorrect! The correct answer is _____`
 
 > Made with ♥️ at [Multiverse](https://www.multiverse.io/en-US)
diff --git a/src/App.js b/src/App.js
index 5534516..ac53f08 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,7 +5,23 @@ const category = '';
 const TRIVIA_API = `https://opentdb.com/api.php?amount=1&category=${category}&difficulty=easy`;
 
 class App extends Component {
+  constructor() {
+    super();
+    this.state = { question: null };
+  }
+
+  async componentDidMount() {
+    let response = await fetch(TRIVIA_API);
+    let data = await response.json();
 
+    fetch(TRIVIA_API)
+      .then(res => res.json())
+      .then(data => this.setState({ question: data.results[0] }))
+      .catch(error => {
+        console.error(error);
+        console.log(data.results[0]);
+      });
+  }
 
   render() {
     return (
@@ -17,7 +33,7 @@ class App extends Component {
         </h2>
         <hr />
         <div>
-          {/* Render question here */}
+          {this.state.question && <Question question={this.state.question} />}
         </div>
       </div>
     );
diff --git a/src/components/Question.js b/src/components/Question.js
index 4b8efd3..6a8aeca 100644
--- a/src/components/Question.js
+++ b/src/components/Question.js
@@ -35,11 +35,15 @@ class Question extends React.Component {
             <AnswerButton
               key={answer}
               answer={answer}
+              handleGuess={() => this.handleGuess(answer)}
             />
           ))}
         </div>
-
-        {/* Dynamically render correct/incorrect here! */}
+        {this.state.guessed && (
+          this.state.guess === this.props.question.correct_answer ?
+            <span className="text-success">Correct!</span> :
+            <span className="text-danger">Incorrect!</span>
+        )}
       </div>
     );
   }