Putting it together
- React Native course
- Intermediate
- Lesson 46/116
- 6 min
Combine all parts into a working quiz app.
Putting it together
In the final lesson you will combine all parts into a working QuizApp. When the component mounts it loads questions from the API, runs the quiz flow and shows the score. You keep questions, index, score state with useState.
Inside useEffect you define an async function load; you load the questions with fetch and call setQuestions(data). With handleAnswer you check the answer, update the score and move to the next question. This lesson brings all the previous parts together: the Question model, fetch, useState, useEffect, handleAnswer. The result is the core of a real quiz app. At the end of this project you will have a working mini app.
Practice Write the QuizApp component
Write a QuizApp component. Start questions with [], index with 0, score with 0 using useState. Inside useEffect define an async function load: assign await fetch("https://api.example.com/questions") to const response, assign await response.json() to const data; call setQuestions(data). Call load(). Use the empty dependency array []. Write const question = questions[index]. Write function handleAnswer(i): if i === question?.answer call setScore(score + 1); always call setIndex(index + 1). Return <View><Text>{question?.question}</Text><Button title={question?.options?.[0]} onPress={() => handleAnswer(0)} /><Text>Score: {score}</Text></View>.
Starter code
// Import useState, useEffect and Text, View, Button
// Write the QuizApp component
// Start questions, index, score state
// Inside useEffect write async load; load with fetch, call setQuestions
// Define question and handleAnswer
// Show with View, Text and ButtonSample solution
import { useEffect, useState } from "react";
import { Text, View, Button } from "react-native";
function QuizApp() {
const [questions, setQuestions] = useState([]);
const [index, setIndex] = useState(0);
const [score, setScore] = useState(0);
useEffect(() => {
async function load() {
const response = await fetch("https://api.example.com/questions");
const data = await response.json();
setQuestions(data);
}
load();
}, []);
const question = questions[index];
function handleAnswer(i) {
if (i === question?.answer) setScore(score + 1);
setIndex(index + 1);
}
return (
<View>
<Text>{question?.question}</Text>
<Button title={question?.options?.[0]} onPress={() => handleAnswer(0)} />
<Text>Score: {score}</Text>
</View>
);
}Project complete
Congratulations! You completed the five-lesson quiz project. You designed the question model, loaded it from the API, wrote the flow, computed the score and combined all parts. The result is the core of a real quiz app.
This project brought together the core concepts of React Native: state management with useState, data loading with useEffect, API calls with fetch, event handlers such as handleAnswer. As a next step you can extend this app: show multiple choices, add a time limit, write a result screen. This project is an example of combining what you learned in a real app. From here you can build your own apps.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match the piece to its role
| Term | Meaning |
|---|---|
useState |
Opens state |
useEffect |
Loads data |
fetch |
Makes a request |
handleAnswer |
Handles the answer |
2 When does the data load in QuizApp?
useEffect(() => { /* ... */ }, []);- Her render'da
- Once, when the component appears Correct answer
- Only when the button is pressed
- Never
Explanation: With the empty dependency array useEffect runs once when the component mounts.
3 Write the useEffect dependency array
useEffect(() => { async function load() { /* ... */ } load(); }, ____);useEffect(() => { async function load() { /* ... */ } load(); }, []);Explanation: The empty array makes useEffect run only once.