React Native – Manage CheckBox states

Issue

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.

Solution

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.

Answered By – Newbie

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0