React Native
Score calculation
Write the score calculation screen.
Score calculation
In this lesson you will add score calculation to the quiz flow. You keep score with useState. When the user presses a choice, a handleAnswer function runs. This function checks if the pressed choice equals question.answer; if so it calls setScore(score + 1); then it moves to the next question with setIndex(index + 1).
This lesson also shows useState for number state. score is a number; it grows by one on each correct answer. You show it with <Text>Score: {score}</Text>. The handleAnswer function turns user input into a state change; this pattern is very common in React. You will extend the Quiz component from the previous lesson.
Exercise Add handleAnswer and score
The Quiz component from the previous lesson is already defined below. Now extend it. Start score with useState(0). Write function handleAnswer(i): if i === question.answer call setScore(score + 1); always call setIndex(index + 1). Make the button's onPress call () => handleAnswer(0). Add <Text>Score: {score}</Text> to the return.
Show example 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 [score, setScore] = useState(0);
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>Skor: {score}</Text>
</View>
);
}
Showing the score
Showing the score on screen tells the user about their progress. You do it with <Text>Score: {score}</Text>. The {score} uses the JSX rule of writing a JavaScript expression in curly braces; this way you embed the state value in the text.
Every time the score updates the component re-renders and the new value appears on screen. This is the essence of React's reactive nature: when state changes the UI updates automatically. In the next lesson you will combine all parts into a full QuizApp that loads questions from the API, runs the flow and shows the score. This lesson prepared us for the final step: combining everything.
Test yourself
-
Start the score state
const [score, ____] = useState(0);
Show answer
const [score, setScore] = useState(0);
-
What does the handleAnswer function do?
function handleAnswer(i) { /* ... */ }
- If the answer is correct the score goes up; it always moves to the next question
- Only the score goes up
- Nothing
- It only moves to the next question
Show answer
If the answer is correct the score goes up; it always moves to the next question — If the answer is correct the score rises; you always move to the next question.
-
Match the concept to its role
- score
- Number correct
- handleAnswer
- Answer handler
- question.answer
- Correct index
- setIndex(index + 1)
- Next question
Next lesson: Putting it together
