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 `` 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 && }
+ {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 {
- {/* Render question here */}
+ {this.state.question && }
);
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 {
this.handleGuess(answer)}
/>
))}
-
- {/* Dynamically render correct/incorrect here! */}
+ {this.state.guessed && (
+ this.state.guess === this.props.question.correct_answer ?
+ Correct! :
+ Incorrect!
+ )}
);
}