Запутался, почему реагирует компонент, не рендеринг из данных

Question

Я пытаюсь выяснить, почему определенная разметка из моего компонента реагирования не отображается. Не выдается никаких ошибок.

Я передаю данные компонента в форме:

const moduleData = {
    openTickets: {
        title: 'Open Tickets',
        stats: [
            [ //rows
                {
                    stat: 2,
                    desc: 'New',
                },
                {
                    stat: 2,
                    desc: "Unseen for > 24 hours",
                }
            ],
            [
                {
                    stat: 32,
                    desc: 'In Progress'
                },
                {
                    stat: 2,
                    desc: 'In progress for > 1 week',
                }
            ]
        ]
    }
}

...

<DashboardModule data={moduleData.openTickets}/>

и DashboardModuleComponent выглядит следующим образом:

import React, {Fragment} from 'react';

function DashboardModule(props) {
    const {data} = props;
    return(
    <div className="dashboard__module">
        <div className="dashboard__module_header">
            <h3 className="dashboard__module_title h2">{data.title}</h3>
        </div>
        {
            data.stats.forEach((statRow,index)=>{
                console.log(statRow,index);
                return (
                    <div className="dashboard__module_row" key={`module_row--${index}`}>
                        {
                            statRow.forEach((stat,statIndex)=>{
                                console.log(stat.stat);
                                return (
                                    <div key={`stat_container--${statIndex}`}className={`dashboard__module_stat_container ${statIndex === 0 && 'primary'}`}>
                                        <p className="dashboard__module_stat">{stat.stat}</p>
                                        <p className="dashboard__module_desc">{stat.desc}</p>
                                    </div>
                                )
                            })
                        }
                    </div>
                )
            })
        }
    </div >
    );
};

export default DashboardModule;

Журналы консоли укажите правильные данные, но после:

<div className="dashboard__module_header">
    <h3 className="dashboard__module_title h2">{data.title}</h3>
</div>

нет разметки * Что мне не хватает?

Answer 1

Используйте map вместо forEach. forEach просто обходит коллекцию, не возвращая результат.

Answer 2

Я думаю, вам нужно использовать data.stats.map () вместо foreach ()