JSFiddle - React, Tailwind, and code Playground

JavaScript

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import './styles.css';
import classes from './components/Month/month.module.css'


function App() {
  const [users, setUser] = useState(null);
  const cls = [];

  const fetchData = async () => {
    const response = await axios.get(
      'https://yalantis-react-school.herokuapp.com/api/task0/users'
    );

    setUser(response.data);
  };
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: [],


 
}))
);
    if(this.groupedUsers.length > 2 ) {
    cls.push(classes.month + 'red')
  } else if (this.Array.length > 5) {
    cls.push(classes.month + 'green')
  };
//Не получается получить доступ к массиву(ключу) users в объектах массива groupedUsers 

  return (
    <div className="App">
      <h1>Users list</h1>
      

      {/* Fetch data from API */}
      <div>
        <button className="fetch-button" onClick={fetchData}>
          download users
        </button>
        <br />
      </div>

      {/* Display data from API */}
      <div className="users">
       {groupedUsers && groupedUsers.map(n => (
  <div key={n.month} className={classes.cls}>
    <h2>{n.month}</h2>
    {n.users.map(user => (
      <div key={user.id} className={classes.user}>
       
        <div>
         <h4 className={classes.userId}>user #{user.id}</h4>
        данные пользователя...</div>
      </div>
    ))}
  </div>
))}