Recursive Mithril View function - not rendering further

Question

Here is a DisplayComment function. I want to make a comment thread. Basically a reply structure kind of thing. Each parent comment is displayed in the table and I want to render its replies just below it using the same function and so on for their replies. Screenshot of Display of parent comment

function DisplayComment(commentStruct, identity) {
  const comment = commentStruct.comment;
  return {
    oninit: (v) => {
      console.log(comment.mComment);
    },
    view: (v) => [
      m('tr', [
        m('i.fas.fa-angle-right', {
          class: 'fa-rotate-' + (commentStruct.showReplies ? '90' : '0'),
          style: 'margin-top:12px',
          onclick: () => {
            commentStruct.showReplies = !commentStruct.showReplies;
            // console.log(commentStruct.showReplies);
          },
        }),

        m('td', comment.mComment),
        m(
          'select[id=options]',
          {
            onchange: (e) => {
              if (e.target.selectedIndex === 1) {
                // reply
                util.popupMessage(
                  m(AddComment, {
                    parent_comment: comment.mComment,
                    channelId: comment.mMeta.mGroupId,
                    authorId: identity,
                    threadId: comment.mMeta.mThreadId,
                    parentId: comment.mMeta.mMsgId,
                  })
                );
              } else if (e.target.selectedIndex === 2) {
                // voteUP
                AddVote(
                  util.GXS_VOTE_UP,
                  comment.mMeta.mGroupId,
                  comment.mMeta.mThreadId,
                  identity,
                  comment.mMeta.mMsgId
                );
              } else if (e.target.selectedIndex === 3) {
                AddVote(
                  util.GXS_VOTE_DOWN,
                  comment.mMeta.mGroupId,
                  comment.mMeta.mThreadId,
                  identity,
                  comment.mMeta.mMsgId
                );
              }
            },
          },
          [
            m('option[hidden][selected]', 'Options'),
            util.optionSelect.opts.map((option) =>
              m('option', { value: option }, option.toLocaleString())
            ),
          ]
        ),
        m('td', rs.userList.userMap[comment.mMeta.mAuthorId]),
        m(
          'td',
          typeof comment.mMeta.mPublishTs === 'object'
            ? new Date(comment.mMeta.mPublishTs.xint64 * 1000).toLocaleString()
            : 'undefined'
        ),
        m('td', comment.mScore),
        m('td', comment.mUpVotes),
        m('td', comment.mDownVotes),
      ]),
      commentStruct.showReplies
        ? Data.ParentCommentMap[comment.mMeta.mMsgId]
          ? Data.ParentCommentMap[comment.mMeta.mMsgId].forEach(
              (value) =>
                Data.Comments[value.mMeta.mThreadId] &&
                Data.Comments[value.mMeta.mThreadId][value.mMeta.mMsgId]
                  ?
                      m(DisplayComment(
                        Data.Comments[value.mMeta.mThreadId][value.mMeta.mMsgId],
                        identity
                      ))
                  : ''
            )
          : ''
        : '',
    ],
  };
}

I want to know why the recursive call to DisplayComment is not being rendered on the screen in the table below the parent.

Answer 1

forEach() does not return anything. Used a map() function instead of forEach() and the replies were displayed. Huge credits to @Barney