I don't understand how to append JSON object data to an Accordion

Question

I have a JSON response from an API, an example of which can be seen below. In the example, question_groups contains 3 groups named DDD , FED , and IPE , and within each group is a questions array. In reality, there are more than 3 groups and most groups contain 5 or more questions.

I can display each question & its corresponding response in the order in which each group appears in JSON, but I don't understand how I can apply each group and its subsequent questions to an accordion. I can create an accordion which displays each group on a new layer/tab, but each layer/tab contains all questions from all groups. I want to make it that each accordion layer is titled with one group_name and is populated with the questions from that group.

Here is my code for displaying the questions data. This code differentiates between questions which require a users written input and a select option.

const TextQuestion = ({ title, question }) => {
  return (
    <Box>
        <TextField variant="outlined" label={title} value={question?.Question || ""} />
        <TextField variant="outlined" label="Response" />
    </Box>
  );
};

const SelectQuestion = ({ title, question }) => {
  return (
    <Box>
        <TextField variant="outlined" multiline label={title} value={question?.Question || ""} />
        <Select label="Question" autoWidth >
          {question.Choices.map((choice) => (
            <MenuItem key={choice} value={choice}>
              {choice}
            </MenuItem>
          ))}
        </Select>
    </Box>
  );
};

const questionComps = questions["question_groups"]?.map((group, i) => {
  return group["questions"]?.map((question, i) => {
    return question["QuestionType"] === "Text" ? (
      <Box>
        <TextQuestion key={`${i}${question.Question}`} title={group["GroupName"]} question={question} />
        <Divider />
      </Box>
    ) : (
        <Box>
          <SelectQuestion key={`${i}${question.Question}`} title={group["GroupName"]} question={question} />
          <Divider />
        </Box>
    );
  });
});

My accordion

<Accordion style={{ marginTop: "10px", addingLeft: "10px", }} >
  <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
    <Typography>{group?.GroupName}</Typography>
  </AccordionSummary>
  <AccordionDetails>{questionComps}</AccordionDetails>
</Accordion>

The example of my JSON

    {
      "question_groups": [
        {
          "GroupName": "DDD",
          "questions": [
            {
              "Question": "Do you want a drink",
              "QuestionType": "Single Choice",
              "Response": null,
              "Choices": [
                "Yes",
                "No"
              ]
            }
          ],
          "SizingId": null
        },
        {
          "GroupName": "FED",
          "questions": [
            {
              "Question": "What do you want to drink",
              "QuestionType": "Single Choice",
              "Response": null,
              "Choices": [
                null
              ]
            },
            {
              "Question": "Place your drinks order",
              "QuestionType": "Text",
              "Response": null,
              "Choices": [
                null
              ]
            }
          ],
          "SizingId": null
        },
        {
          "GroupName": "IPE",
          "questions": [
            {
              "Question": "Would you like something to eat?",
              "QuestionType": "Single Choice",
              "Response": null,
              "Choices": [
                "No",
                "Yes"
              ]
            }
          ],
          "SizingId": null
        }
      ]
    }

Answer 1

Mapping the group names to the accordion summary and then mapping through the questions inside the accordion details results in the desired layout rendered.

    const questionComps = questions["question_groups"]?.map((group, i) => {
        return (
            <Accordion
                style={{
                    marginTop: "10px",
                    paddingLeft: "10px",
                }}
            >
                <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
                    <Typography>{group?.GroupName}</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    {group["questions"]?.map((question, j) => {
                        return question["QuestionType"] === "Text" ? (
                            <Box>
                                <TextQuestion key={`${i}${question.Question}`} title={group["GroupName"]} question={question} />
                                <Divider />
                            </Box>
                        ) : (
                            <Box>
                                <SelectQuestion
                                    key={`${j}${question.Question}`}
                                    title={group["GroupName"]}
                                    question={question}
                                />
                                <Divider />
                            </Box>
                        );
                    })}
                </AccordionDetails>
            </Accordion>
        );
    });