Running the quiz
- React Native course
- Intermediate
- Lesson 44/116
- 6 min
Write the flow that shows questions in turn.
Quiz flow
In this lesson you will write a Quiz component. The component shows the questions in turn. You keep an index with useState; this decides which question is shown. For each question you take the current question with question = questions[index].
The component draws the question and its choices on screen. You show the question text with Text and the choices with Button. For now we show only the first choice; in the next lesson we add all choices and answer checking. This lesson assumes you know useState and JSX; you will apply them to a quiz flow. On mount index is 0 and the first question appears.
Practice Write the Quiz component
The questions constant and loadQuestions function from the previous lesson are already defined below. Now add a Quiz component. Start index with useState(0). Get the current question with const question = questions[index]. Return <View><Text>{question.question}</Text><Button title={question.options[0]} onPress={() => {}} /></View>.
Starter code
const questions = [
{ id: 1, question: "Capital of Turkey?", options: ["İstanbul", "Ankara", "İzmir"], answer: 1 },
{ id: 2, question: "What is 2 + 2?", options: ["3", "4", "5"], answer: 1 }
];
async function loadQuestions() {
const response = await fetch("https://api.example.com/questions");
const data = await response.json();
return data;
}
// Import useState and Text, View, Button
// Write the Quiz component
// Start the index state at 0
// Get the current question
// Show it with View, Text and ButtonSample solution
import { useState } from "react";
import { Text, View, Button } from "react-native";
const questions = [
{ id: 1, question: "Capital of Turkey?", options: ["İstanbul", "Ankara", "İzmir"], answer: 1 }
];
function Quiz() {
const [index, setIndex] = useState(0);
const question = questions[index];
return (
<View>
<Text>{question.question}</Text>
<Button title={question.options[0]} onPress={() => {}} />
</View>
);
}Extending the flow
In this lesson you wrote a simple flow with one choice. In the next step we will extend it: show all choices, add answer checking and compute the score. This is the heart of a real quiz app.
The flow logic is this: the user presses a choice → if the answer is correct the score increases → move to the next question. This loop continues until all questions are done. For now we only took the first step: showing the question. In the next lessons you will write a function such as handleAnswer to complete this loop. Stepping forward one piece at a time is the best way to break down a complex app.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match the concept to its role
| Term | Meaning |
|---|---|
index |
Which question |
useState |
Opens state |
questions[index] |
Current question |
Text |
Question text |
2 Why does the Quiz component keep an index state?
const [index, setIndex] = useState(0);- To make an API call
- To hold style data
- To calculate the score
- To track which question is shown Correct answer
Explanation: index tracks which question is shown.
3 Get the current question
const [index, setIndex] = useState(0);
const question = ____[index];const [index, setIndex] = useState(0);
const question = questions[index];Explanation: questions[index] gives the current question.