Tengo un montón de grupos JSON extraídos de una API. Cada grupo contiene 1 o más objetos de questions . Necesito agregar cada pregunta a un campo de texto con su response correspondiente en un campo de texto MUI o Seleccionar, que debe decidirse en función del valor de Tipo de QuestionType .
A continuación se muestra cómo estoy tratando de obtener datos para mostrar en un TextField. Los TextFields se están completando con [object Object] tal como están ahora.
const [questions, setQuestions] = useState(""); const fetchQuestions = async () => { setQuestions( await fetch(`/fiscalyears/FY2023/intakes/${params.id}/details/questions`) .then((response) => response.json()) ); }; ... {questions["question_groups"]?.map((row) => ( <TextField fullWidth multiline className="text-field" value={row?.questions || ""} variant="outlined" margin="normal" label={row["GroupName"]} /> ))} Aquí hay un ejemplo de mi JSON. En realidad, podría haber 20 grupos dentro de question_groups
{ "question_groups": [ { "GroupName": "DDD", "questions": [ { "Question": "1. Do you need a drink?", "QuestionType": "Select", "Response": null, "Choices": [ "Yes", "No" ] } ] }, { "GroupName": "FED", "questions": [ { "Question": "2. What do you want to drink?", "QuestionType": "Text", "Response": null, "Choices": [ ] }, { "Question": "3. Do you want something to eat?", "QuestionType": "Text", "Response": "I would like steak", "Choices": [ ] } ] } ], }Cualquier ayuda o consejo sería muy apreciado.
Cree dos componentes para cada QuestionType .
const SelectQuestion = ({ question }) => { return ( <Box> <TextField value={question?.Question || ""} /> <Select label="Question" > <MenuItem value={question?.Choices || ""}>{question?.Choices || ""}</MenuItem> </Select> <Divider /> </Box> ); }; const TextQuestion = ({ question }) => { return ( <Box> <TextField value={question?.Question || ""}/> <TextField /> <Divider /> </Box> ); }; Mapee la matriz de question_groups , luego mapee la matriz de questions en cada grupo y devuelva uno de los tipos de componentes según el valor de QuestionType
const questionComps = questions["question_groups"]?.map((group, i) => { return group["questions"]?.map((question, i) => { return question["QuestionType"] === "Text" ? ( <Box> <TextQuestion key={`${i}${question.Question}`} question={question} /> <Divider /> </Box> ) : ( <Box> <SelectQuestion key={`${i}${question.Question}`} question={question} /> <Divider /> </Box> ); }); });Ahora renderiza los componentes de la pregunta.
return ( <div>{questionComps}</div> )