2 minutes ago

What is the reason for not displaying all tabs in the MUI tab component in React?

What am I developing?

  • I'm creating a tab component to horizontally scroll through and select a date in a month.
  • The MUI library is being used for this purpose.


  • Currently, the site is not displaying the dates before 14th Sun. (See image below)
  • The first tab should show the 1st day of the month, but instead, it displays 14th Sun.
enter image description here

Tab Component Code

import { useContext, useState } from 'react';
import * as React from 'react';
import { styled } from '@mui/system';
import Tabs from '@mui/base/Tabs';
import TabsList from '@mui/base/TabsList';
import TabPanel from '@mui/base/TabPanel';
import { buttonClasses } from '@mui/base/Button';
import Tab, { tabClasses } from '@mui/base/Tab';
import { Box, Typography } from '@mui/material';
import getDatesInMonth from '@/utils/getDatesInMonth';
import { dateContext } from '@/pages/mob';

export default function DayScrollView() {
  const [activeDate, setActiveDate] = useContext(dateContext)
  const [dates, setDates] = useState(getDatesInMonth(activeDate))
  return (
    <Box sx={
        overflowX: 'scroll',
        scrollbarWidth: 'none',
        '-ms-overflow-style': 'none',
        '&::-webkit-scrollbar': {
          display: 'none',
      <Tabs defaultValue={0}>
          {, index) => {
            return (
              <StyledTab key={index} value={index} onClick={() => setActiveDate(date)}>
                <Typography variant='subtitle1'>{date.toLocaleString('default', { weekday: 'short' })}</Typography>
                <Typography variant='h5'>{date.getDate()}</Typography>
      <Box mr={10} sx={{ width: 20 }} />

const StyledTab = styled(Tab)`
.... some css styles

const StyledTabPanel = styled(TabPanel)(
  ({ theme }) => `
  width: 100%;
  ... more styles

const StyledTabsList = styled(TabsList)(
  ({ theme }) => `
  padding-right: 1rem;
  ...more styles

getDatesInMonth() Function

function getDatesInMonth(date) {
    const year = date.getFullYear();
    const month = date.getMonth();
    const numDays = new Date(year, month + 1, 0).getDate();
    const dates = [];
    for (let i = 1; i <= numDays; i++) {
        dates.push(new Date(year, month, i));
    return dates;
  • If you require further information, please leave a comment.
  • If you know someone who can assist, please upvote and share the question.
2 minutes ago
Verified Answer
The component is a horizontally scrollable tab component for selecting dates in a month, using the MUI library. The problem is that the dates before the 14th Sunday are not showing on the site and the first tab should be the 1st day of the month, but instead, it is the 14th Sunday. The component code includes a function called getDatesInMonth() which returns an array of dates for the month provided as the input argument. If more information is needed, please write in the comments.