Nested Object not showing the component

Question

Strangely, I have <Avatar> that works with single object parse using .map

<Flex>
  <div></div>
  {studentsjson.map((thr) => (
    <Avatar color="red" key={thr.id} component={Link} to="/complete">
      {thr.Name}
    </Avatar>
  ))}
</Flex>

However, below does not work

{
  teacher.map((thr) =>
    thr.students.map((stu) => {
      <Avatar color="red" key={stu.id} component={Link} to="/complete">
        {stu.studentName}
      </Avatar>;
    })
  )
}

Answer 1

As others have mentioned, the callback argument of the nested .map returns nothing. Hence, nothing can be expected to render. This can be fixed by removing the curly braces to perform an "implicit return".

I have a feeling you'll want to use Array.prototype.flatMap as well; e.g.

{
  teachers.flatMap(
      teacher =>
          teacher.students.map(
               student =>
                   <Avatar color="red" key={stu.id} component={Link} to="/complete">
                     {stu.studentName}
                   </Avatar>
          )
      )
}