Issue with nesting for:each iterator using LWC

Question

I am receiving an undefined error over my for:each block in my lwc HTML.

I am unsure why QuestionChoices is undefined as it's a key on the surveyQuestion object.

Parent Component: surveyQuestions is set to my JSON payload returned from APEX.

<template if:true={surveyQuestions}>
          <template for:each={surveyQuestions} for:item="surveyQuestion">
            <div key={surveyQuestion.id}>
              <c-survey-translation-child
                question-name={surveyQuestion.QuestionName}
                question-type={surveyQuestion.QuestionType}
              >
              </c-survey-translation-child>
              <template if:true={surveyChoiceButton}>
                <template
                  for:each={surveyQuestion.QuestionChoices}
                  for:item="responseOption"
                >
                  <c-survey-question-response
                    response-option-name={responseOption.Name}
                    key={responseOption.id}
                  >
                  </c-survey-question-response>
                </template>
              </template>
            </div>
          </template>
        </template>

Survey Question Response Component HTML:

<template>
  <p>
    {responseOptionName}
  </p>
</template>

Survey Question Response Component JS:

import { LightningElement, api } from "lwc";

export default class SurveyQuestionResponse extends LightningElement {
  @api responseOptionName;
}

Survey Translation Child HTML:

<template>
  <lightning-card>
    <div>
      <p class="slds-p-horizontal_small">
        <span class="slds-text-title_bold">
          Question Name:
        </span>
        <span class="slds-m-left_x-small">
          {questionName}
        </span>
      </p>
      <p class="slds-p-horizontal_small">
        <span class="slds-text-title_bold">
          Response Type:
        </span>
        <span class="slds-p-horizontal_small">
          {questionType}
        </span>
      </p>
      <lightning-button
        variant="base"
        label="Click to view Response Choices"
        title="Save"
        onclick={handleClick}
        class="slds-m-left_x-small"
      ></lightning-button>
    </div>
  </lightning-card>
</template>

Survey Translation Child JS:

import { LightningElement, api, track } from "lwc";

export default class SurveyTranslationChild extends LightningElement {
  @api questionName;
  @api questionType;
  @api responseOptionsId;
  @api responseOptions;
  @api responseOptionName;
  @track surveyChoiceButton = false;

  handleClick() {
    this.surveyChoiceButton = !this.surveyChoiceButton;
    console.log(this.surveyChoiceButton);
  }
}

Update I have been able to get past the undefined error however the surveyQuestionResponse component is not rendering when set to true

SurveyQuestion object structure:

Answer 1

It is not working because you defined surveyChoiceButton in survey-translation-child and you are using it in surveyQuestions.

Remove the below code from surveyQuestions and put it in survey-translation-child

     <template if:true={surveyChoiceButton}>
            <template
              for:each={surveyQuestion.QuestionChoices}
              for:item="responseOption"
            >
              <c-survey-question-response
                response-option-name={responseOption.Name}
                key={responseOption.id}
              >
              </c-survey-question-response>
            </template>
          </template>