Mapping JSON to MUI cards not returning any UI elements or errors-CodePudding

I have the following JSON which I want to map to MUI Cards. I am not getting any error messages but nothing is being displayed. The console.log(questionGroups) only displays the JSON after changing some unrelated code to cause a live reload.

    const [questionGroups, setQuestionGroups] = useState("");

    const fetchQuestionGroups= async () => {
        setQuestionGroups(
            await fetch(`API_LINK`).then((response) => response.json())
        );
        console.log(questionGroups);
    };

    useEffect(() => {
        fetchQuestionGroups();
    }, []);
...
            <Box className={classes.cards}>
                {questionGroups?.displaygroups?.IntakeQuestion?.map((group, groupIndex) => {
                    return (
                        <Card className={classes.card1}>
                            <CardHeader title={group.GroupName} />
                        </Card>
                    );
                })}
            </Box>

This is a sample of my JSON:

{
  "displaygroups": {
    "IntakeQuestions": [
      {
        "GroupId": 11,
        "GroupName": "Group 1",
        "SizingId": null,
        "OwnerName": "Jane Doe",
        "Questions": 0,
        "Answered": null,
        "Validated": null
      }
    ]
  }
}

CodePudding user response：

Use && instead of ?

<Box className={classes.cards}>
    {questionGroups &&
        questionGroups.displaygroups &&
        questionGroups.displaygroups.IntakeQuestions.map((group, groupIndex) => {
            return (
                <Card className={classes.card1}>
                    <CardHeader title={group.GroupName} />
                </Card>
            );
        })}
</Box>

CodePudding user response：

You need to set the state once the data is available.

const fetchQuestionGroups= async () => {
     const data = await fetch(`API_LINK`)
     const temp  = response.json()
     setQuestionGroups(temp);
     console.log(questionGroups);
  };