Nested Return html inside react render

Question

So i'll try to explain the situation here.

OVERVIEW: I am getting an array of transactions. I am then grouping those transactions based on the month. The key of each item in the groupedTransactions object is a month like [02-2012] etc and the values against the keys are an array of objects containing all the transactions for that month. Now What i want is that in the render method inside <tbody> i call on a function that will return: A row in the table saying "Transactions for the month of: March" followed by all the transactions that happend.

CODE so far: In render or return of functional component i should say:

      <tbody>
         <tr>
           <th>Some heading</th>
         </tr>

        {!isLoading?

        accountSummary(account.transactions,account.balances.current )
        :''
      }
 </tbody>

Now in accountSummary method:

 const accountSummary = (accTx,currentBalance)=>{
        console.log('called account summary');
        let groupedTransactions = groupTransactionsByMonth(accTx);

        return Object.keys(groupedTransactions).map((month,index)=>{
                console.log('called for loop');
                console.log(month);
                return(

                        <tr>
                            <td style={{fontWeight:'bold',fontSize:'1em'}}>Transactions in the Month of {moment(month).format("MMMM")}</td>
                            {loopOverGroupedTxByMonth(month,groupedTransactions)}
                        </tr>

                )

        })
    };

and finally in the loopOverGroupedTxByMonth(month,groupedTransactions) method:

    const loopOverGroupedTxByMonth = (month,groupedTransactions) =>{
       return  groupedTransactions[month].forEach(function (transaction, index) {
            console.log(transaction)
            //Lot of variables here that are used below so no need for that 
            return (
                <tr>
                    <td><Moment format="LL">{transaction.date}</Moment></td>
                    <td>{transaction.original_description}</td>
                    <td>{displayInflow ? displayInflow : '---'}</td>
                    <td>{displayOutflow ? displayOutflow : '---'}</td>

                </tr>
            );
        });
    }

So as you can guess by now the accountSummary method does infact return "Transactions for the month of: March" and april BUTT it doesn't return any thing in between which should have been returned by the loopOverTxByMonth method. Interestingly in the console everything is fine. I get a month then all its transactions then another month and so on. SO what i am doing wrong here I know its a bit complicated but bear with me please.Thank you i can answer any questions if you need further clarity or code.

Answer 1

const loopOverGroupedTxByMonth = (month,groupedTransactions) =>{
       return  groupedTransactions[month].map(function (transaction, index) {
            console.log(transaction)
            //Lot of variables here that are used below so no need for that 
            return (
                <tr>
                    <td><Moment format="LL">{transaction.date}</Moment></td>
                    <td>{transaction.original_description}</td>
                    <td>{displayInflow ? displayInflow : '---'}</td>
                    <td>{displayOutflow ? displayOutflow : '---'}</td>

                </tr>
            );
        });
    }

Replace forEach with map and see the magic.