JS function result not rendering

Question

I'm trying to render the result of the function renderVerticalCards, but nothing is returned in the DOM, other than the outer divs (those from outside the function call). I have confirmed through the console, that the function is being called, so I'm guessing that my problem has to do with my use of curly brackets, but I have not been able to find a solution. Any suggestions?

    view({ attrs }) {

        console.log("In view", attrs);
        console.log(attrs);
        
        const renderVerticalCards = (cards) => {
            console.log("in function")
            return(
                cards.map(card => {
                <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-3-tablet mdc-layout-grid__cell--span-4-desktop process-card">
                    <div class="process-card__number-container">
                        <div class="process-card__number-container__circle">
                            <div class="process-card__number-container__circle process-card__number-container__circle__number"> {card.Number} </div>
                        </div>
                    </div>
                    <div class=".tk-typography--title-md process-card__title"> {card.Title} </div>
                    <div class="mdc-typography--body preserve-linebreaks process-card__text"> {card.ContentText} </div>
                    <a class="mdc-button process-card__link" href={card.Link}> {card.LinkText} </a>  
                </div>
                })
            )
        }

        return (
            <div class="mdc-layout-grid" style="padding-top:0">
                <div class="mdc-layout-grid__inner">
                { renderVerticalCards(this.cards) }
                </div>
            </div>
        )
    }

Answer 1

Try:

cards.map(card => {
return (
                    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-3-tablet mdc-layout-grid__cell--span-4-desktop process-card">
                        <div class="process-card__number-container">
                            <div class="process-card__number-container__circle">
                                <div class="process-card__number-container__circle process-card__number-container__circle__number"> {card.Number} </div>
                            </div>
                        </div>
                        <div class=".tk-typography--title-md process-card__title"> {card.Title} </div>
                        <div class="mdc-typography--body preserve-linebreaks process-card__text"> {card.ContentText} </div>
                        <a class="mdc-button process-card__link" href={card.Link}> {card.LinkText} </a>  
                    </div>
);
                    })