From 749088ddf0072ca82ae297318dd29cd12d0a3c41 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 17 Jun 2021 00:59:13 +0900
Subject: [PATCH] DatePicker: Fix crash when navigating between months (#31751)

---
 packages/components/src/date-time/date.js       |  2 +-
 .../components/src/date-time/stories/date.js    | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/src/date-time/stories/date.js

diff --git a/packages/components/src/date-time/date.js b/packages/components/src/date-time/date.js
index 66c54275ea8a8e..d70181d3d655d3 100644
--- a/packages/components/src/date-time/date.js
+++ b/packages/components/src/date-time/date.js
@@ -82,7 +82,7 @@ class DatePicker extends Component {
 	}
 
 	onMonthPreviewedHandler( newMonthDate ) {
-		this.props?.onMonthPreviewed( newMonthDate.toISOString() );
+		this.props.onMonthPreviewed?.( newMonthDate.toISOString() );
 		this.keepFocusInside();
 	}
 
diff --git a/packages/components/src/date-time/stories/date.js b/packages/components/src/date-time/stories/date.js
new file mode 100644
index 00000000000000..6859eec76bd71f
--- /dev/null
+++ b/packages/components/src/date-time/stories/date.js
@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import DatePicker from '../date';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+export default { title: 'Components/DatePicker', component: DatePicker };
+
+export const _default = () => {
+	const [ date, setDate ] = useState();
+
+	return <DatePicker currentDate={ date } onChange={ setDate } />;
+};