ReactJS: Как распределить элементы из api в jsx блоки по значению даты?

Question

[constant101]

Новичок в JS. Есть такие задачи:
1) загрузить пользователей из api
2) отображения списка месяцев
3) подсветить месяца в зависимости от количества людей, которые родились в этом месяце.
4) при наведении на выбранный месяц - отобразить список людей, родившихся в этом месяце.
К сожалению, я застрял после импорта пользователей из API.
Извините за банальный вопрос:- Каким методом распределить пользователей в блоки (месяцы рождения)? большое спасибо

Код потуг: https://jsfiddle.net/bmnfo2uh/

пример элемента юзера { "id": "5e00928d43fcdd11688a6afd", "firstName": "Moody", "lastName": "Gordon", "dob": "2019-11-09T20:20:43.744Z" }

Answer 1

[0xD34F]

Группируете данные по месяцам:

const groupedUsers = users && users.reduce((acc, n) => {
  acc[new Date(n.dob).getMonth()].users.push(n);
  return acc;
}, [...Array(12)].map((n, i) => ({
  month: new Date(0, i).toLocaleString('ru-RU', { month: 'long' }),
  users: [],
})));

Рендерите их, например (это сразу всё; если надо - можете выбирать какой-то конкретный месяц):

{groupedUsers && groupedUsers.map(n => (
  <div key={n.month}>
    <h2>{n.month}</h2>
    {n.users.map(user => (
      <div key={user.id}>
        <h3>user #{user.id}</h3>
        <div>данные пользователя...</div>
      </div>
    ))}
  </div>
))}

Comments

[constant101]

Скрин объекта groupedUsers
Как я понял, для проверки на длину,обратиться нужно к элементу users.length в элементе массива, который содержит данный объект. Однако, возникли трудности с доступом к этому ключу.

[0xD34F]

constant101, "возникли трудности"? А дальше что? Предлагаете мне угадать, что это за "трудности"? Нет, так не будет.

[constant101]

0xD34F, пардон, себя прокомментировал по ошибке

Спасибо огромное! но при выполнения пунктов 3) подсветить месяца в зависимости от количества людей, которые родились в этом месяце. и
4) при наведении на выбранный месяц - отобразить список людей, родившихся в этом месяце.
натыкаюсь на ошибки. Очевидно, что некорректна функция if else, но менял слишком много раз, утыкаясь в ошибки(.


https://jsfiddle.net/h2548sg1/

//Не получается получить доступ к массиву(ключу) users в объектах массива groupedUsers
К какому элементу(массиву обращаться) для смены цветов блоков в зависимости от кол-ва юзеров, а также выводу их при наведении? Если все же к users, то как грамотно построить функция Object.keys для корректной ее отработки в данном случае?

Еще раз спасибо!

[0xD34F]

constant101, "натыкаюсь на ошибки" - круто. А в песочнице - нерабочий огрызок кода. То есть, опять предлагаете мне угадать, что там у вас не так. Сказал же - угадывать ничего не буду. Раз слов не понимаете, смысла продолжать разговор не вижу.