ReactJS: How to distribute elements from api to jsx blocks by date value?

Question

JavaScript

New to js. There are such tasks:
1) load users from api
2) display a list of months
3) highlight months depending on the number of people who were born in this month.
4) when you hover over the selected month - display a list of people born in this month.
Unfortunately, I'm stuck after importing users from the API.
Sorry for the banal question: - What is the method to distribute users into blocks (months of birth)? thanks a lot Try
code: https://jsfiddle.net/bmnfo2uh/
user element example { "id": "5e00928d43fcdd11688a6afd", "firstName": "Moody", "lastName": "Gordon", "dob": "2019- 11-09T20:20:43.744Z" }

Answer 1

Group data by month:

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: [],
})));

Render them, for example (this is all at once; if necessary, you can choose a specific month):

{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>
))}