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>;
    })
  )
}

If you add `{` in your function, you have to add the `return` keyword. e.g 1: `() => { /* you should add return key word*/}` e.g 2: `() => // no need of return key word` — Danielprabhakaran N, Mar 28 '23 at 02:35

Arman Charan · Accepted Answer · 2023-05-03T03:15:50.783

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>
          )
      )
}

score 2 · Answer 2 · edited Mar 28 '23 at 02:39

Following place is where you are making mistake.

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

add a return statement or remove { curly braces.

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

Ahmed Sbai · Answer 3 · 2023-03-28T02:30:27.137

In the second block of code, the problem is that you are only looping through students creating <Avatar/>s but nothing is returned, you either have to use

implicit return :

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

or explicit return :

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

to return an non empty array.

Nested Object not showing the component

3 Answers3