React component not rendering on state update

Question

I am loading some data from my API, it is returned successfully, but React is not rendering the cards afterwards.

export default function Subjects() {
  const userApi = useUserService();
  const auth = useRecoilValue(AuthAtom);
  const [loading, setLoading] = React.useState<boolean>(true);
  const [subjects, setSubjects] = React.useState<Subject[]>();

  React.useEffect(() => {
    userApi.getSubjects(auth?.userId ?? 0).then((value: Subject[]) => {
      setSubjects(value);
      setLoading(false);
    });
  }, []);

  return (
    <Box display="flex" flexDirection="row" alignItems="center">
      {!loading &&
        subjects?.map(function (subject: Subject) {
          <Card key={subject.name}>
            <CardActionArea>
              <CardContent>{subject.name}</CardContent>
            </CardActionArea>
          </Card>;
        })}
    </Box>
  );
}

userApi.getSubjects returns an array of Subjects.

See [this](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable) and [this](https://stackoverflow.com/questions/45754957/why-doesnt-my-arrow-function-return-a-value). — T.J. Crowder, Nov 08 '21 at 12:49

score 3 · Accepted Answer · answered Nov 08 '21 at 12:48

You don't return anything inside the .map callback, so your component doesn't render anything. To fix it:

subjects?.map(function (subject: Subject) {
  // add the return statement like below.
  return (
    <Card key={subject.name}>
      <CardActionArea>
        <CardContent>{subject.name}</CardContent>
      </CardActionArea>
    </Card>
  );
})}

score 2 · Answer 2 · answered Nov 08 '21 at 12:48

Your function in the body do not return anything. Try this:

return (
    <Box display="flex" flexDirection="row" alignItems="center">
      {!loading &&
        subjects?.map(function (subject: Subject) {
          return (
             <Card key={subject.name}>
               <CardActionArea>
                 <CardContent>{subject.name}</CardContent>
               </CardActionArea>
             </Card>;
          );
        })}
    </Box>
  );
}

React component not rendering on state update

2 Answers2