GOAL: You will be building a Trivia app that will fetch data inside a componentDidMount, pass props to children components, and initialize and update state via this.setState. Together we’ll build the Trivia app to have just 1 question with a random category, but there will be plenty of additional features you can add on your own time!
- Fork this repo, clone to your desktop, and install dependencies:
npm install
- Start the server, and navigate to
localhost:1234
npm run start
- Lint the JavaScript
npm run lint
- In
App.js
, fetch a trivia question from the provided API- Use the
TRIVIA_API
constant.console.log()
the response from the API to see the structure of the response. - Store the response question in state. You’ll have to initialize state for this as well. Since the response from the API will be a complex object, initialize
state.question
asnull
, so we can check if a question is present or not.
- Use the
- Use the
Question
component that’s imported intoApp
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 andthis.state.question
is stillnull
, we don’t want to render the component yet.
{this.state.question && <Question question={this.state.question}} />}
- Note: We’ll have to conditionally render the
- You’ll notice that
Question
is already rendering anAnswerButton
component, but clicking on an answer button doesn’t do anything yet. We need to passthis.handleGuess
toAnswerButton
.- Notice that
handleGuess
expects a single argument of answer to be passed to it. Figure out how we should pass answer intohandleGuess
!
- Notice that
- 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 adiv
- In
- Inside the
div
, ifthis.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 _____
- Let them know they are correct by rendering a helpful
Made with
♥️ at Multiverse