Formatting array objet values within a column using line breaks in material ui table cell

Question

Given the following array data:

let myArr = [
  {
    id: 1,
    name: "A",
    people: [ { myId: 2, myName: "Name: Fred  Likes: Apples" },
              { myId: 3, myName: "Name: John  Likes: Pears" },
              { myId: 4, myName: "Name: Sally  Likes: Pineapple" } ] 
  },
  {
    id: 2,
    name: "B",
    people: [ { myId: 12, myName: "Name: Freddie  Likes: Basketball" },
              { myId: 14, myName: "Name: Sallie  Likes: Sports" } ] 
  }

]

I'm using Material-UI tables in react which has two columns to display: Name and People but with the people column, I would like to add breaks, so that the information is displayed underneath each other, that is:

Name             People
---------------- -----------------------
A                Name: Fred  Likes: Apples
                 Name: John  Likes: Pears
                 Name: Sally  Likes: Pineapple
B                Name: Freddie  Likes: Basketball
                 Name: Sallie  Likes: Sports

The code that I have is as follows:

 <TblContainer>
    <TblHead />
    <TableBody>
      {myArr.map((rec) => (
        <TableRow>
          <TableCell>{rec.name}</TableCell>
          {rec.people.map((e, index) => (
            <TableCell>
              {
                <span>
                  {e.myName}{' '}
                  {index < rec.people.length - 1 ? <br /> : ''}
                </span>
              }
            </TableCell>
          ))}
        </TableRow>
      ))}
    </TableBody>
  </TblContainer>

Unfortunately the result of my code above is displaying the "People" column values side by side and ignoring the line breaks, i.e.

Name  People
----- -----------------------
A     Name: Fred  Likes: Apples   Name: John  Likes: Pears.  Name: Sally  Likes: Pineapple
B     Name: Freddie  Likes: Basketball.  Name: Sallie  Likes: Sports

Any ideas as to what I am doing wrong so that I can get the People data formatted nicely underneath each other?

Answer 1

I don't know how but this works:

<TableContainer>
<TableHead />
<TableBody>
  {myArr.map((rec) => (
    <TableRow>
      <TableCell>{rec.name}</TableCell>
      
        <TableCell>
            {rec.people.map((e, index) => (
                <>
                    <span>{e.myName}{' '}</span>
                    {index < rec.people.length - 1 ? <br /> : ''}
                </>
            ))}
        </TableCell>
    </TableRow>
  ))}
</TableBody>

Output Screenshot Below: