Как сделать карту в React?

Question

[Herberito Galustyan]

Я хочу отобразить список предметов (проектов), сгруппированных по месяцам и годам ...

Для группировки я сделал следующее и напечатал результаты, которые кажутся хорошими:

// this gives an object with dates as keys
    const groups = filteredProjects.reduce((groups, project) => {
        //const date = project.Properties.ModificationTime.Value.split('T')[0];
        //const  month = moment(project.Properties.ModificationTime.Value, 'YYYY-MM-DD').format('MMM');
        const  date = moment(project.Properties.ModificationTime.Value, 'YYYY-MM-DD').format('MMM-YYYY');
        if (!groups[date]) {
            groups[date] = [];
        }
        groups[date].push(project);
        return groups;
    }, {});

    // Edit: to add it in the array format instead
    const groupedProjects = Object.keys(groups).map((date) => {
        return {
            date,
            projects: groups[date]
        };
    });

Теперь я хочу сделать так, чтобы каждый месяц имел свои собственные компоненты проектов. Поэтому я попробовал следующее:

{groupedProjects.map((date, arr) => (
                    <div className="inline">
                        {date}
                        {arr.map((item) =>
                            <Project
                                key={item.Name}
                                project={item}
                            />
                        )}
                    </div>
                    ))}

Но это не работает. Как я могу сделать карту таким образом?

Answer 1

[Петр Мухуров]

не работает, потому что

const groupedProjects = Object.keys(groups).map((date) => {
        return {
            date,
            projects: groups[date]
        };
    });

у вас лежат в массиве объекты, а тут

groupedProjects.map((date, arr) => (
                    <div className="inline">
                        {date}
                        {arr.map((item) =>
                            <Project
                                key={item.Name}
                                project={item}
                            />
                        )}
                    </div>
                    ))}

вы пытаетесь отрендерить объект, а под ним Number.map

groupedProjects.map(({ date, projects }) => (
  {date}
  {projects.map()}
)

Comments

[Антон Спирин]

Помимо перечисленного, автор пытается вызвать метод map на индексе, который приходит вторым аргументом в колбек groupedProjects.map.

[Петр Мухуров]

Антон Спирин, я вроде написал об этом)

вы пытаетесь отрендерить объект, а под ним Number.map

[Антон Спирин]

Петр Мухуров, точно. Невнимательность)