chore: better props declaration

Author: mxmxmarexmxm

src/pages/GameOverScreen.js

@@ -3,19 +3,19 @@ import Button from '../components/UI/Button';
 import classes from './GameOverScreen.module.css';
 
 const GameOverScreen = (props) => {
-  const { correctAnswers, incorrectAnswers } = props;
+  const { trueAnswers, falseAnswers } = props;
 
   return (
     <div className={classes.container}>
       <h1>
-        Result: {correctAnswers.length} of {props.questions.length} (
-        {(correctAnswers.length / props.questions.length) * 100}%)
+        Result: {trueAnswers.length} of {props.questions.length} (
+        {(trueAnswers.length / props.questions.length) * 100}%)
       </h1>
 
-      {incorrectAnswers.length !== 0 && (
+      {falseAnswers.length !== 0 && (
         <div className={classes['answers-container']}>
-          <span className={classes['answers-title']}>Incorrect answers:</span>
-          {incorrectAnswers.map((answer) => (
+          <span className={classes['answers-title']}>False answers:</span>
+          {falseAnswers.map((answer) => (
             <div
               key={answer.question.id}
               className={classes['question-container']}
@@ -34,10 +34,10 @@ const GameOverScreen = (props) => {
         </div>
       )}
 
-      {correctAnswers.length !== 0 && (
+      {trueAnswers.length !== 0 && (
         <div className={classes['answers-container']}>
-          <span className={classes['answers-title']}>Correct answers:</span>
-          {correctAnswers.map((answer) => (
+          <span className={classes['answers-title']}>True answers:</span>
+          {trueAnswers.map((answer) => (
             <div
               key={answer.question.id}
               className={classes['question-container']}

src/pages/QuizScreen.js

@@ -4,15 +4,16 @@ import { getObjKey } from '../utils/get-obj-keys';
 import GameOverScreen from './GameOverScreen';
 import classes from './QuizScreen.module.css';
 
-let correctAnswers = [];
-let incorrectAnswers = [];
+let trueAnswers = [];
+let falseAnswers = [];
 
 const QuizScreen = (props) => {
   const [currentQuestion, setCurrentQuestion] = useState(0);
   const [chosenAnswers, setChosenAnswers] = useState([]);
   const [gameIsOver, setGameIsOver] = useState(false);
+  const { questions } = props;
 
-  let answersArray = props.questions[currentQuestion].answers;
+  let answersArray = questions[currentQuestion].answers;
   let answersValues = Object.values(answersArray).filter((v) => v !== null);
 
   function answersHandler(selectedAnswer) {
@@ -29,7 +30,7 @@ const QuizScreen = (props) => {
   }
 
   const nextHandler = () => {
-    let correctAnswersList = props.questions[currentQuestion].correct_answers;
+    let correctAnswersList = questions[currentQuestion].correct_answers;
     const userAnswer = chosenAnswers.join(', ');
     let correct_answer = '';
 
@@ -40,21 +41,21 @@ const QuizScreen = (props) => {
     }
 
     if (userAnswer === correct_answer) {
-      correctAnswers.push({
-        question: props.questions[currentQuestion],
+      trueAnswers.push({
+        question: questions[currentQuestion],
         correctAnswer: correct_answer,
         userAnswer: userAnswer,
         questionNumber: currentQuestion + 1,
       });
     } else {
-      incorrectAnswers.push({
-        question: props.questions[currentQuestion],
+      falseAnswers.push({
+        question: questions[currentQuestion],
         correctAnswer: correct_answer,
         userAnswer: userAnswer,
         questionNumber: currentQuestion + 1,
       });
     }
-    if (currentQuestion < props.questions.length - 1) {
+    if (currentQuestion < questions.length - 1) {
       setCurrentQuestion((curr) => curr + 1);
     } else {
       setGameIsOver(true);
@@ -65,9 +66,9 @@ const QuizScreen = (props) => {
   if (gameIsOver) {
     return (
       <GameOverScreen
-        correctAnswers={correctAnswers}
-        incorrectAnswers={incorrectAnswers}
-        questions={props.questions}
+        trueAnswers={trueAnswers}
+        falseAnswers={falseAnswers}
+        questions={questions}
       />
     );
   }
@@ -77,7 +78,7 @@ const QuizScreen = (props) => {
       {
         <h2 className={classes.title}>
           {currentQuestion + 1 + '. '}
-          {props.questions[currentQuestion].question}
+          {questions[currentQuestion].question}
         </h2>
       }
       <div className={classes['answers-container']}>