Can't get quiz to display when setting questions to an array

[orph-c]

I'm using the react native quiz maker to make a quiz, and I currently have an array that has all questions in the specified format. However, when I use the below code to display the quiz, I get empty space where the quiz should been. I've tried questions = {{questionList}} I get `Uncaught TypeError: Invalid attempt to spread non-iterable instance. Any workaround for this?

Here's my code currently, where I have a list of objects, and I put them in into the required question format with a for loop. So, I have questionList, which is an array of objects, where each one is formatted according to quiz maker's format (this part works perfectly, when I try to console.log, I get the output I want). In fact, when I console.log questionsList after attempting to render the quiz, I am getting exactly the output I want, which looks something like [{…}, {…}, {…}, {…}, {…}], where inside each set of curly brackets is the question, formatted correctly (with properties questionType, question, and answer).

function Home ({route}) {
  let questionList = [];
  for (let x = 0; x < subset.length; x++) {
    if (route.params.name == 'StoE') {
      let question = {
        questionType: 'Writing',
        question: `What is '${subset[x].spanish}' in English?`,
        answer: subset[x].english
      }
      questionList.push(question)
    } else {
      let question = {
        questionType: 'Writing',
        question: `What is '${subset[x].english}' in Spanish?`,
        answer: subset[x].spanish
      }
      questionList.push(question)
    }
  }
  return (
    <View style={global.container}>
      <Text>{route.params.name}</Text>
      <QuizContainer
        questions={{questionList}}
        onSubmit={(isCorrect) => console.log(isCorrect)}
        onComplete={(progress) => console.log('score: ', progress)} 
      />
      {console.log(questionList)}
    </View>
  );
}

[jtalz]

You're passing an object with key "questionList" as the questions prop. Instead of: <QuizContainer questions={{questionList}} onSubmit={(isCorrect) => console.log(isCorrect)} onComplete={(progress) => console.log('score: ', progress)} />

try: <QuizContainer questions={questionList} onSubmit={(isCorrect) => console.log(isCorrect)} onComplete={(progress) => console.log('score: ', progress)} />

[orph-c]

I removed the extra curly brackets so now it looks like

    <View style={global.container}>
      <Text>{route.params.name}</Text>
      <QuizContainer
        questions={questionList}
        onSubmit={(isCorrect) => console.log(isCorrect)}
        onComplete={(progress) => console.log('score: ', progress)} 
      />
      {console.log(questionList)}
    </View>

However, where the quiz questions should be, I just get a blank space now, like the image below...