React-calendar Prop `aria-label` did not match. Server: "December 26, 2022" Client: "26 December 2022"

Question

I am using react-calendar. The problem comes when the browser console throw an error: Prop aria-label did not match. Server: "December 26, 2022" Client: "26 December 2022"

I created the Calendar component inside main tag.

 <main>
        <DashboardHeaderInfo userInfo={props.newSession.user}>
            {/* Wrapper section */}
            <section>
              <Calendar
                value={date} 
                onChange={handleOnchangeDate} 
                onClickDay={value => handleSelectDay(value)}
                />
            </section>
            
            <CalendarCreateDayModal show={show} setShow={setShow}/>
        </DashboardHeaderInfo>
      </main>
    </Fragment>

I dont know what to look for. I cannot find this error anywhere:

Answer 1

Specify a locale prop in the Calendar component. The locale prop is used to determine the language and date format. By setting this prop, you ensure that the date format is consistent between server and client rendering, which should prevent the mismatch warning.

Here's how you can apply this to your Calendar component:

     <Calendar
         locale="en-GB"
         value={date} 
         onChange={handleOnchangeDate} 
         onClickDay={value => handleSelectDay(value)}
       />

In this example, I've set the locale prop to "en-GB", which will format dates in the day-month-year order. You can adjust this to match the date format you want.

Answer 2

Problem came from Calendar that u need to tell data type it will receive. To fix it you just add locale params like this and no more rerender error !