diff --git a/app/assets/javascripts/components/wizard/form_panel.jsx b/app/assets/javascripts/components/wizard/form_panel.jsx
index 142e2d92bd..51ab8884fc 100644
--- a/app/assets/javascripts/components/wizard/form_panel.jsx
+++ b/app/assets/javascripts/components/wizard/form_panel.jsx
@@ -1,144 +1,148 @@
-import React from 'react';
-import createReactClass from 'create-react-class';
+import React, { useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import Panel from './panel.jsx';
 import DatePicker from '../common/date_picker.jsx';
 import Calendar from '../common/calendar.jsx';
 import CourseDateUtils from '../../utils/course_date_utils.js';
 
-const FormPanel = createReactClass({
-  displayName: 'FormPanel',
-
-  propTypes: {
-    course: PropTypes.object.isRequired,
-    shouldShowSteps: PropTypes.bool,
-    updateCourse: PropTypes.func.isRequired,
-    isValid: PropTypes.bool.isRequired
-  },
+// Utility function for safe property access and transformation
+function __guard__(value, transform) {
+  return (typeof value !== 'undefined' && value !== null) ? transform(value) : undefined;
+}
 
-  setAnyDatesSelected(bool) {
-    return this.setState({ anyDatesSelected: bool });
-  },
+const FormPanel = ({ course, shouldShowSteps, updateCourse, isValid, persistCourse, noDates }) => {
+  const noDatesRef = useRef(null);
 
-  setBlackoutDatesSelected(bool) {
-    return this.setState({ blackoutDatesSelected: bool });
-  },
-  setNoBlackoutDatesChecked() {
-    const { checked } = this.noDates;
-    const toPass = this.props.course;
-    toPass.no_day_exceptions = checked;
-    return this.props.updateCourse(toPass);
-  },
+  const setNoBlackoutDatesChecked = useCallback(() => {
+    const { checked } = noDatesRef.current;
+    const toPass = { ...course, no_day_exceptions: checked };
+    updateCourse(toPass);
+  }, [course, updateCourse]);
 
-  updateCourseDates(valueKey, value) {
-    const updatedCourse = CourseDateUtils.updateCourseDates(this.props.course, valueKey, value);
-    return this.props.updateCourse(updatedCourse);
-  },
+  const updateCourseDates = useCallback((valueKey, value) => {
+    const updatedCourse = CourseDateUtils.updateCourseDates(course, valueKey, value);
+    updateCourse(updatedCourse);
+  }, [course, updateCourse]);
 
-  saveCourse() {
-    if (this.props.isValid) {
-      this.props.persistCourse(this.props.course.slug);
+  const saveCourse = useCallback(() => {
+    if (isValid) {
+      persistCourse(course.slug);
       return true;
     }
     alert(I18n.t('error.form_errors'));
     return false;
-  },
-  nextEnabled() {
-    if (__guard__(this.props.course.weekdays, x => x.indexOf(1)) >= 0 && (__guard__(this.props.course.day_exceptions, x1 => x1.length) > 0 || this.props.course.no_day_exceptions)) {
-      return true;
-    }
-    return false;
-  },
+  }, [isValid, persistCourse, course.slug]);
 
-  render() {
-    const dateProps = CourseDateUtils.dateProps(this.props.course);
+  const nextEnabled = useCallback(() => {
+    return (__guard__(course.weekdays, x => x.indexOf(1)) >= 0)
+           && (__guard__(course.day_exceptions, x => x.length) > 0 || course.no_day_exceptions);
+  }, [course.weekdays, course.day_exceptions, course.no_day_exceptions]);
 
-    const step1 = this.props.shouldShowSteps
-      ? <h2><span>1.</span><small> Confirm the course’s start and end dates.</small></h2>
-      : <p>Confirm the course’s start and end dates.</p>;
+  const dateProps = CourseDateUtils.dateProps(course);
 
-    const rawOptions = (
-      <div>
-        <div className="course-dates__step">
-          {step1}
-          <div className="vertical-form full-width">
-            <DatePicker
-              onChange={this.updateCourseDates}
-              value={this.props.course.start}
-              value_key="start"
-              editable={true}
-              validation={CourseDateUtils.isDateValid}
-              label="Course Start"
-            />
-            <DatePicker
-              onChange={this.updateCourseDates}
-              value={this.props.course.end}
-              value_key="end"
-              editable={true}
-              validation={CourseDateUtils.isDateValid}
-              label="Course End"
-              date_props={dateProps.end}
-              enabled={Boolean(this.props.course.start)}
-            />
-          </div>
-        </div>
-        <hr />
-        <div className="course-dates__step">
-          <p>{I18n.t('wizard.assignment_description')}</p>
-          <div className="vertical-form full-width">
-            <DatePicker
-              onChange={this.updateCourseDates}
-              value={this.props.course.timeline_start}
-              value_key="timeline_start"
-              editable={true}
-              validation={CourseDateUtils.isDateValid}
-              label={I18n.t('courses.assignment_start')}
-              date_props={dateProps.timeline_start}
-            />
-            <DatePicker
-              onChange={this.updateCourseDates}
-              value={this.props.course.timeline_end}
-              value_key="timeline_end"
-              editable={true}
-              validation={CourseDateUtils.isDateValid}
-              label={I18n.t('courses.assignment_end')}
-              date_props={dateProps.timeline_end}
-              enabled={Boolean(this.props.course.start)}
-            />
-          </div>
+  const step1 = shouldShowSteps
+    ? <h2><span>1.</span><small>{I18n.t('wizard.confirm_dates')}</small></h2>
+    : <p>{I18n.t('wizard.confirm_dates')}</p>;
+
+  const rawOptions = (
+    <div>
+      <div className="course-dates__step">
+        {step1}
+        <div className="vertical-form full-width">
+          <DatePicker
+            onChange={updateCourseDates}
+            value={course.start}
+            value_key="start"
+            editable={true}
+            validation={CourseDateUtils.isDateValid}
+            label="Course Start"
+          />
+          <DatePicker
+            onChange={updateCourseDates}
+            value={course.end}
+            value_key="end"
+            editable={true}
+            validation={CourseDateUtils.isDateValid}
+            label="Course End"
+            date_props={dateProps.end}
+            enabled={Boolean(course.start)}
+          />
         </div>
-        <hr />
-        <div className="wizard__form course-dates course-dates__step">
-          <Calendar
-            course={this.props.course}
+      </div>
+      <hr />
+      <div className="course-dates__step">
+        <p>{I18n.t('wizard.assignment_description')}</p>
+        <div className="vertical-form full-width">
+          <DatePicker
+            onChange={updateCourseDates}
+            value={course.timeline_start}
+            value_key="timeline_start"
+            editable={true}
+            validation={CourseDateUtils.isDateValid}
+            label="Assignment Start"
+            date_props={dateProps.timeline_start}
+          />
+          <DatePicker
+            onChange={updateCourseDates}
+            value={course.timeline_end}
+            value_key="timeline_end"
             editable={true}
-            save={true}
-            setAnyDatesSelected={this.setAnyDatesSelected}
-            setBlackoutDatesSelected={this.setBlackoutDatesSelected}
-            calendarInstructions={I18n.t('wizard.calendar_instructions')}
-            updateCourse={this.props.updateCourse}
+            validation={CourseDateUtils.isDateValid}
+            label="Assignment End"
+            date_props={dateProps.timeline_end}
+            enabled={Boolean(course.start)}
           />
-          <label> I have no class holidays
-            <input type="checkbox" onChange={this.setNoBlackoutDatesChecked} ref={(checkbox) => { this.noDates = checkbox; }} />
-          </label>
         </div>
       </div>
-    );
+      <hr />
+      <div className="wizard_form course-dates course-dates_step">
+        <Calendar
+          course={course}
+          editable={true}
+          save={true}
+          setAnyDatesSelected={() => {}}
+          setBlackoutDatesSelected={() => {}}
+          calendarInstructions={I18n.t('wizard.calendar_instructions')}
+          updateCourse={updateCourse}
+        />
+        <label>
+          {I18n.t('I have no class holidays')}
+          <input
+            type="checkbox"
+            onChange={setNoBlackoutDatesChecked}
+            ref={(checkbox) => {
+              noDatesRef.current = checkbox;
+              if (noDates) {
+                noDates.current = checkbox;
+              }
+            }}
+          />
+        </label>
+      </div>
+    </div>
+  );
 
-    return (
-      <Panel
-        {...this.props}
-        raw_options={rawOptions}
-        nextEnabled={this.nextEnabled}
-        saveCourse={this.saveCourse}
-        helperText = "Select meeting days and holiday dates, then continue."
-      />
-    );
-  }
-});
+  return (
+    <Panel
+      course={course}
+      shouldShowSteps={shouldShowSteps}
+      updateCourse={updateCourse}
+      isValid={isValid}
+      raw_options={rawOptions}
+      nextEnabled={nextEnabled}
+      saveCourse={saveCourse}
+      helperText={I18n.t('wizard.select_dates_and_continue')}
+    />
+  );
+};
 
-export default FormPanel;
+FormPanel.propTypes = {
+  course: PropTypes.object.isRequired,
+  shouldShowSteps: PropTypes.bool,
+  updateCourse: PropTypes.func.isRequired,
+  isValid: PropTypes.bool.isRequired,
+  persistCourse: PropTypes.func.isRequired,
+  noDates: PropTypes.shape({ current: PropTypes.object })
+};
 
-function __guard__(value, transform) {
-  return (typeof value !== 'undefined' && value !== null) ? transform(value) : undefined;
-}
+export default FormPanel;