Why my function compareQA return 0 or -1?

Question

This screen is for multiplication exercise, multiplication is given and you have to put the answer in the textinput and click OK. But the problem is that in my function compareQA, qaindex return 0 or -1.

import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, Pressable, TextInput } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import styles from '../Components/AppStyle';
import {LittleSpace05,LittleSpace1, LittleSpace4} from '../Components/LittleSpace';
import changeSize from '../Components/ChangeSize';

function RouletteExercice1 ({ route, navigation }){

  const { multiplyArray, multBy} = route.params;

  const [adaptTitleFontSize, setAdaptTitleFontSize] = useState({
    fontSize: 16,
  });
  const [adaptButtonFontSize, setAdaptButtonFontSize] = useState({
    fontSize: 16,
  });

  const getSize = (event, divide, thing) => {
    if (thing == 'title') {
      setAdaptTitleFontSize(changeSize(event.nativeEvent.layout, divide))
    } else {
      setAdaptButtonFontSize(changeSize(event.nativeEvent.layout, divide))
    }

   };

   const [questionsArray,setQuestionsArray] = useState([]);
   const [answersArray,setAnswersArray] = useState([]);
   const [mQuestion,setMQuestion] = useState();
   const [qaIndex,setQAIndex] = useState(0);
   const [textInputAnswer, setTextInputAnswer] = useState();

  useEffect(() => {
    createQuestionsArray();
  },[]);

   function createQuestionsArray() {
       let m = 0;
       while (m < multiplyArray.length) {
         let b = 1;
         while (b < multBy+1) {
           let quest = multiplyArray[m]+'x'+b;
           let rep = multiplyArray[m]*b;
           setQuestionsArray((prev) => [...prev, quest]);
           setAnswersArray((prev) => [...prev, rep]);
           b++
         }
        m++
       }
       askQuestion();
   }

   function askQuestion(){
       setMQuestion(questionsArray[Math.floor(Math.random()*questionsArray.length)]);

   }

   function compareQA(){
     setQAIndex(questionsArray.indexOf(mQuestion));
     if (answersArray[qaIndex]==textInputAnswer) {
       questionsArray.splice(qaIndex,1);
       answersArray.splice(qaIndex,1);
       console.log(qaIndex);
       askQuestion();
     }
   }

  return(
    <View  style={{ flex: 1, flexDirection: 'column'}}>
      <StatusBar style="auto" />
      <View style={{flex: 1}}>
      </View>
      <View style={{flex: 4, alignItems: 'center', justifyContent: 'center'}}>
        <LittleSpace1/>
        <LittleSpace1/>
        <View onLayout={(event) => {getSize(event,2,'title')}} style={[styles.setViewRE1, {alignItems: 'center'}]}>
          <Text style={[styles.textExercice, adaptTitleFontSize,{fontWeight: 'bold'}]}>{mQuestion}</Text>
        </View>
        <LittleSpace05/>
        <View  style={[styles.setViewRE1, {alignItems: 'center'}]}>
          <Text style={[styles.textExercice, adaptTitleFontSize,{fontWeight: 'bold'}]}>=</Text>
        </View>
        <LittleSpace05 />
        <View onLayout={(event) => {getSize(event, 3,'button')}} style={styles.setViewRE1}>
          <LittleSpace4/>
          <TextInput
            onChangeText={text => setTextInputAnswer(text.replace(/[^0-9]/g, ''))}
            value={textInputAnswer}
            placeholder=" perso"
            textAlign={'center'}
            keyboardType="numeric"
            style={[ styles.inputRE1, adaptButtonFontSize]}
            type='number'
          />
          <LittleSpace1/>
          <Pressable style={styles.buttonRE1} onPress={() => {compareQA();}} >
            <Text style={[styles.textExercice, adaptButtonFontSize]}>OK</Text>
          </Pressable>
          <LittleSpace1/>
        </View>
        <LittleSpace1/>
        <LittleSpace1/>
        <LittleSpace4/>
      </View>
      <View style={{flex: 1,}}>
      </View>
    </View>
  )

}

export default RouletteExercice1;

multiplayArray = [35,17] multby = 5

The function createQuestionsArray create a list of multiplication [35x1,35x2,35x3,35x4,35x5,17x1,17x2,17x3,17x4,17x5].

The function askQuestion is supposed to take a random multiplication from the list questionsArray but when I compare it with the answer it's not working.

Can someone tell me what is wrong in my code? Please.

Answer 1

Unless you want createQuestionsArray to run on every render, this:

useEffect(() => {
    createQuestionsArray();
});

should be

useEffect(() => {
    createQuestionsArray();
}, []);

This is likely kicking off many re-renders, given that you're setting state inside this function.