React Native - Manage CheckBox states-CodePudding

I want to make a Quiz App.

Questions are checked after user presses Submit button.

So questions are checked all at once in the end.

I need to save user choices (answers) for each question and then later check them on submit.

I was thinking about this:

let [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
let [userAnswers, setUserAnswers] = useState([] as any);

  function answerClick(value: any, key: any) {
    // console.log('answer clicked');
    userAnswers[currentQuestionIndex][key] = value; 
    // TypeError: undefined is not an object (evaluating 'userAnswers[currentQuestionIndex][key] = value')
  }

My checkbox for each possible answer in the question:

<BouncyCheckbox
   key={index}
   onPress={(value) => {
      answerClick(value, index);
   }}
   text={answer.title}
/>

But I get

TypeError: undefined is not an object (evaluating 'userAnswers[current][key] = value')

on Answer click

What is setUserAnswers() equivalent of userAnswers[currentQuestionIndex][key] = value?

Why am I getting undefined error?

How to do this, please help my head hurts.

CodePudding user response：

First off, the userAnswers should have the key and values of everything you're trying to change. The reason you're getting undefined is because you're trying to target an object in the userAnswers array which can't be found. Also, you are modifying the userAnswers state directly and that's really wrong. That's what the setUserAnswers is for. You can do this instead.

function answerClick(value: any, key: any) {
    // console.log('answer clicked');
    setUserAnswers([
        ...usersAnswers,
        {[key]: [value]}
    ]);
  }

CodePudding user response：

You are attempting to access a non existing index in the array.

userAnsqers = [];
currentQuestionIndex = 0;
// userAnswers[currentQuestionIndex] === undefined

What are you attempting to do is adding an {} to the array lazily (only when needed). This will work:

function answerClick(value: any, key: any) {
  setUserAnswers(latest => {
    const out = [...latest];
    while (out.length <= currentQuestionIndex) out.push({});
    out[currentQuestionIndex][key] = value;
    return out;
  })
}

There is nothing equivalent to setUserAnswers() for userAnswers[currentQuestionIndex][key] = value (see). You may find som custom hooks to manage arrays or build your own.