diff --git a/src/layouts/selection-plan-id-layout.js b/src/layouts/selection-plan-id-layout.js
index 39720b10d..90b9da405 100644
--- a/src/layouts/selection-plan-id-layout.js
+++ b/src/layouts/selection-plan-id-layout.js
@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { connect } from "react-redux";
-import { Switch, Route, Redirect } from "react-router-dom";
+import { Redirect, Route, Switch } from "react-router-dom";
 import { Breadcrumb } from "react-breadcrumbs";
 import T from "i18n-react";
 import EditSelectionPlanPage from "../pages/selection-plans/edit-selection-plan-page";
@@ -13,80 +13,59 @@ import SelectionPlanExtraQuestionsLayout from "./selection-plan-extra-questions-
 import SelectionPlanRatingTypesLayout from "./selection-plan-rating-types-layout";
 import { MAX_PER_PAGE } from "../utils/constants";
 
-class SelectionPlanIdLayout extends React.Component {
-  componentDidMount() {
-    const selectionPlanId = this.props.match.params.selection_plan_id;
+const SelectionPlanIdLayout = ({
+  match,
+  currentSelectionPlan,
+  currentSummit,
+  getSelectionPlan,
+  resetSelectionPlanForm,
+  getMarketingSettingsBySelectionPlan
+}) => {
+  const selectionPlanId = match.params.selection_plan_id;
+  const breadcrumb = selectionPlanId
+    ? currentSelectionPlan.name
+    : T.translate("general.new");
 
+  useEffect(() => {
     if (!selectionPlanId) {
-      this.props.resetSelectionPlanForm();
+      resetSelectionPlanForm();
     } else {
-      this.props
-        .getSelectionPlan(selectionPlanId)
-        .then(() =>
-          this.props.getMarketingSettingsBySelectionPlan(
-            selectionPlanId,
-            null,
-            1,
-            MAX_PER_PAGE
-          )
-        );
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    const oldId = prevProps.match.params.selection_plan_id;
-    const newId = this.props.match.params.selection_plan_id;
-
-    if (oldId !== newId) {
-      if (!newId) {
-        this.props.resetSelectionPlanForm();
-      } else {
-        this.props
-          .getSelectionPlan(newId)
-          .then(() =>
-            this.props.getMarketingSettingsBySelectionPlan(
-              newId,
-              null,
-              1,
-              MAX_PER_PAGE
-            )
-          );
-      }
+      getSelectionPlan(selectionPlanId).then(() =>
+        getMarketingSettingsBySelectionPlan(
+          selectionPlanId,
+          null,
+          1,
+          MAX_PER_PAGE
+        )
+      );
     }
-  }
+  }, [selectionPlanId]);
 
-  render() {
-    const { match, currentSelectionPlan, currentSummit } = this.props;
-    const selectionPlanId = this.props.match.params.selection_plan_id;
-    const breadcrumb = selectionPlanId
-      ? currentSelectionPlan.name
-      : T.translate("general.new");
-    return (
-      <div>
-        <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
-        <Switch>
-          <Route
-            strict
-            exact
-            path={`${match.url}`}
-            component={EditSelectionPlanPage}
-          />
-          <Route
-            path={`${match.url}/extra-questions`}
-            component={SelectionPlanExtraQuestionsLayout}
-          />
-          <Route
-            path={`${match.url}/rating-types`}
-            component={SelectionPlanRatingTypesLayout}
-          />
-          <Redirect
-            to={`/app/summits/${currentSummit.id}/selection-plans/${selectionPlanId}`}
-          />
-        </Switch>
-      </div>
-    );
-  }
-}
+  return (
+    <div>
+      <Breadcrumb data={{ title: breadcrumb, pathname: match.url }} />
+      <Switch>
+        <Route
+          strict
+          exact
+          path={`${match.url}`}
+          component={EditSelectionPlanPage}
+        />
+        <Route
+          path={`${match.url}/extra-questions`}
+          component={SelectionPlanExtraQuestionsLayout}
+        />
+        <Route
+          path={`${match.url}/rating-types`}
+          component={SelectionPlanRatingTypesLayout}
+        />
+        <Redirect
+          to={`/app/summits/${currentSummit.id}/selection-plans/${selectionPlanId}`}
+        />
+      </Switch>
+    </div>
+  );
+};
 
 const mapStateToProps = ({
   currentSelectionPlanState,
diff --git a/src/layouts/selection-plan-layout.js b/src/layouts/selection-plan-layout.js
index 0f54ca407..57d103b6d 100644
--- a/src/layouts/selection-plan-layout.js
+++ b/src/layouts/selection-plan-layout.js
@@ -16,7 +16,6 @@ import { connect } from "react-redux";
 import { Redirect, Route, Switch } from "react-router-dom";
 import T from "i18n-react/dist/i18n-react";
 import { Breadcrumb } from "react-breadcrumbs";
-import EditSelectionPlanPage from "../pages/selection-plans/edit-selection-plan-page";
 import SelectionPlanListPage from "../pages/selection-plans/selection-plan-list-page";
 import SelectionPlanIdLayout from "./selection-plan-id-layout";
 
@@ -39,7 +38,7 @@ const SelectionPlanLayout = ({ match, currentSummit }) => (
         strict
         exact
         path={`${match.url}/new`}
-        component={EditSelectionPlanPage}
+        component={SelectionPlanIdLayout}
       />
       <Route
         path={`${match.url}/:selection_plan_id(\\d+)`}
diff --git a/src/pages/selection-plans/edit-selection-plan-page.js b/src/pages/selection-plans/edit-selection-plan-page.js
index 0beab8456..07d37b595 100644
--- a/src/pages/selection-plans/edit-selection-plan-page.js
+++ b/src/pages/selection-plans/edit-selection-plan-page.js
@@ -16,47 +16,59 @@ import T from "i18n-react/dist/i18n-react";
 import Swal from "sweetalert2";
 import SelectionPlanForm from "../../components/forms/selection-plan-form";
 import {
-  saveSelectionPlan,
+  addAllowedMemberToSelectionPlan,
+  addEventTypeSelectionPlan,
   addTrackGroupToSelectionPlan,
-  removeTrackGroupFromSelectionPlan,
+  assignExtraQuestion2SelectionPlan,
+  assignProgressFlag2SelectionPlan,
+  deleteEventTypeSelectionPlan,
+  deleteRatingType,
   deleteSelectionPlanExtraQuestion,
+  getAllowedMembers,
+  importAllowedMembersCSV,
+  removeAllowedMemberFromSelectionPlan,
+  removeTrackGroupFromSelectionPlan,
+  saveSelectionPlan,
+  saveSelectionPlanSettings,
+  unassignProgressFlagFromSelectionPlan,
+  updateProgressFlagOrder,
+  updateRatingTypeOrder,
+  updateSelectionPlanExtraQuestionOrder
+} from "../../actions/selection-plan-actions";
+import AddNewButton from "../../components/buttons/add-new-button";
+
+const EditSelectionPlanPage = ({
+  currentSummit,
+  entity,
+  allowedMembers,
+  errors,
+  history,
+  extraQuestionsOrder,
+  extraQuestionsOrderDir,
   updateSelectionPlanExtraQuestionOrder,
-  addEventTypeSelectionPlan,
-  deleteEventTypeSelectionPlan,
+  unassignProgressFlagFromSelectionPlan,
+  deleteSelectionPlanExtraQuestion,
   updateRatingTypeOrder,
   deleteRatingType,
-  assignExtraQuestion2SelectionPlan,
-  assignProgressFlag2SelectionPlan,
   updateProgressFlagOrder,
-  unassignProgressFlagFromSelectionPlan,
+  addTrackGroupToSelectionPlan,
+  removeTrackGroupFromSelectionPlan,
+  saveSelectionPlan,
+  saveSelectionPlanSettings,
   addAllowedMemberToSelectionPlan,
-  removeAllowedMemberFromSelectionPlan,
+  addEventTypeSelectionPlan,
+  assignExtraQuestion2SelectionPlan,
+  assignProgressFlag2SelectionPlan,
+  deleteEventTypeSelectionPlan,
   getAllowedMembers,
   importAllowedMembersCSV,
-  saveSelectionPlanSettings
-} from "../../actions/selection-plan-actions";
-import AddNewButton from "../../components/buttons/add-new-button";
-
-class EditSelectionPlanPage extends React.Component {
-  constructor(props) {
-    super(props);
-    this.onAddNewExtraQuestion = this.onAddNewExtraQuestion.bind(this);
-    this.onDeleteExtraQuestion = this.onDeleteExtraQuestion.bind(this);
-    this.onEditExtraQuestion = this.onEditExtraQuestion.bind(this);
-    this.onUpdateExtraQuestionOrder =
-      this.onUpdateExtraQuestionOrder.bind(this);
-    this.onAddRatingType = this.onAddRatingType.bind(this);
-    this.onEditRatingType = this.onEditRatingType.bind(this);
-    this.onDeleteRatingType = this.onDeleteRatingType.bind(this);
-    this.onUpdateRatingTypeOrder = this.onUpdateRatingTypeOrder.bind(this);
-    this.onAddProgressFlag = this.onAddProgressFlag.bind(this);
-    this.onEditProgressFlag = this.onEditProgressFlag.bind(this);
-    this.onUnassignProgressFlag = this.onUnassignProgressFlag.bind(this);
-    this.onUpdateProgressFlagOrder = this.onUpdateProgressFlagOrder.bind(this);
-  }
+  removeAllowedMemberFromSelectionPlan
+}) => {
+  const title = entity.id
+    ? T.translate("general.edit")
+    : T.translate("general.add");
 
-  onDeleteExtraQuestion(questionId) {
-    const { deleteSelectionPlanExtraQuestion, entity } = this.props;
+  const onDeleteExtraQuestion = (questionId) => {
     const extraQuestion = entity.extra_questions.find(
       (t) => t.id === questionId
     );
@@ -74,58 +86,46 @@ class EditSelectionPlanPage extends React.Component {
         deleteSelectionPlanExtraQuestion(entity.id, questionId);
       }
     });
-  }
+  };
 
-  onUpdateExtraQuestionOrder(questions, questionId, newOrder) {
-    const { entity } = this.props;
-    this.props.updateSelectionPlanExtraQuestionOrder(
+  const onUpdateExtraQuestionOrder = (questions, questionId, newOrder) => {
+    updateSelectionPlanExtraQuestionOrder(
       entity.id,
       questions,
       questionId,
       newOrder
     );
-  }
+  };
 
-  onEditExtraQuestion(questionId) {
-    const { currentSummit, history, entity } = this.props;
+  const onEditExtraQuestion = (questionId) => {
     history.push(
       `/app/summits/${currentSummit.id}/selection-plans/${entity.id}/extra-questions/${questionId}`
     );
-  }
+  };
 
-  onAddNewExtraQuestion() {
-    const { currentSummit, history, entity } = this.props;
+  const onAddNewExtraQuestion = () => {
     history.push(
       `/app/summits/${currentSummit.id}/selection-plans/${entity.id}/extra-questions/new`
     );
-  }
+  };
 
-  onAddRatingType() {
-    const { currentSummit, history, entity } = this.props;
+  const onAddRatingType = () => {
     history.push(
       `/app/summits/${currentSummit.id}/selection-plans/${entity.id}/rating-types/new`
     );
-  }
+  };
 
-  onEditRatingType(ratingTypeId) {
-    const { currentSummit, history, entity } = this.props;
+  const onEditRatingType = (ratingTypeId) => {
     history.push(
       `/app/summits/${currentSummit.id}/selection-plans/${entity.id}/rating-types/${ratingTypeId}`
     );
-  }
+  };
 
-  onUpdateRatingTypeOrder(ratingTypes, ratingTypeId, newOrder) {
-    const { entity } = this.props;
-    this.props.updateRatingTypeOrder(
-      entity.id,
-      ratingTypes,
-      ratingTypeId,
-      newOrder
-    );
-  }
+  const onUpdateRatingTypeOrder = (ratingTypes, ratingTypeId, newOrder) => {
+    updateRatingTypeOrder(entity.id, ratingTypes, ratingTypeId, newOrder);
+  };
 
-  onDeleteRatingType(ratingTypeId) {
-    const { deleteRatingType, entity } = this.props;
+  const onDeleteRatingType = (ratingTypeId) => {
     const ratingType = entity.track_chair_rating_types.find(
       (t) => t.id === ratingTypeId
     );
@@ -143,32 +143,27 @@ class EditSelectionPlanPage extends React.Component {
         deleteRatingType(entity.id, ratingTypeId);
       }
     });
-  }
+  };
 
-  onAddProgressFlag() {
-    const { currentSummit, history } = this.props;
+  const onAddProgressFlag = () => {
     history.push(`/app/summits/${currentSummit.id}/progress-flags`);
-  }
+  };
 
-  onEditProgressFlag(progressFlagId) {
-    const { currentSummit, history } = this.props;
+  const onEditProgressFlag = (progressFlagId) => {
     history.push(
       `/app/summits/${currentSummit.id}/progress-flags#flag_id=${progressFlagId}`
     );
-  }
+  };
 
-  onUpdateProgressFlagOrder(progressFlags, progressFlagId, newOrder) {
-    const { entity } = this.props;
-    this.props.updateProgressFlagOrder(
-      entity.id,
-      progressFlags,
-      progressFlagId,
-      newOrder
-    );
-  }
+  const onUpdateProgressFlagOrder = (
+    progressFlags,
+    progressFlagId,
+    newOrder
+  ) => {
+    updateProgressFlagOrder(entity.id, progressFlags, progressFlagId, newOrder);
+  };
 
-  onUnassignProgressFlag(progressFlagId) {
-    const { unassignProgressFlagFromSelectionPlan, entity } = this.props;
+  const onUnassignProgressFlag = (progressFlagId) => {
     const ratingType = entity.allowed_presentation_action_types.find(
       (t) => t.id === progressFlagId
     );
@@ -186,70 +181,50 @@ class EditSelectionPlanPage extends React.Component {
         unassignProgressFlagFromSelectionPlan(entity.id, progressFlagId);
       }
     });
-  }
+  };
 
-  render() {
-    const {
-      currentSummit,
-      entity,
-      allowedMembers,
-      errors,
-      extraQuestionsOrder,
-      extraQuestionsOrderDir
-    } = this.props;
-    const title = entity.id
-      ? T.translate("general.edit")
-      : T.translate("general.add");
-
-    return (
-      <div className="container">
-        <h3>
-          {title} {T.translate("edit_selection_plan.selection_plan")}
-          <AddNewButton entity={entity} />
-        </h3>
-        <hr />
-        <SelectionPlanForm
-          entity={entity}
-          allowedMembers={allowedMembers}
-          currentSummit={currentSummit}
-          errors={errors}
-          extraQuestionsOrder={extraQuestionsOrder}
-          extraQuestionsOrderDir={extraQuestionsOrderDir}
-          onTrackGroupLink={this.props.addTrackGroupToSelectionPlan}
-          onTrackGroupUnLink={this.props.removeTrackGroupFromSelectionPlan}
-          onSubmit={this.props.saveSelectionPlan}
-          saveSelectionPlanSettings={this.props.saveSelectionPlanSettings}
-          updateExtraQuestionOrder={this.onUpdateExtraQuestionOrder}
-          onAddNewExtraQuestion={this.onAddNewExtraQuestion}
-          onDeleteExtraQuestion={this.onDeleteExtraQuestion}
-          onAddEventType={this.props.addEventTypeSelectionPlan}
-          onDeleteEventType={this.props.deleteEventTypeSelectionPlan}
-          onEditExtraQuestion={this.onEditExtraQuestion}
-          onAddRatingType={this.onAddRatingType}
-          onEditRatingType={this.onEditRatingType}
-          onUpdateRatingTypeOrder={this.onUpdateRatingTypeOrder}
-          onDeleteRatingType={this.onDeleteRatingType}
-          onAssignExtraQuestion2SelectionPlan={
-            this.props.assignExtraQuestion2SelectionPlan
-          }
-          onAddProgressFlag={this.onAddProgressFlag}
-          onEditProgressFlag={this.onEditProgressFlag}
-          onAssignProgressFlag2SelectionPlan={
-            this.props.assignProgressFlag2SelectionPlan
-          }
-          onUnassignProgressFlag={this.onUnassignProgressFlag}
-          onUpdateProgressFlagOrder={this.onUpdateProgressFlagOrder}
-          onAllowedMemberAdd={this.props.addAllowedMemberToSelectionPlan}
-          onAllowedMemberDelete={
-            this.props.removeAllowedMemberFromSelectionPlan
-          }
-          onAllowedMembersPageChange={this.props.getAllowedMembers}
-          onImportAllowedMembers={this.props.importAllowedMembersCSV}
-        />
-      </div>
-    );
-  }
-}
+  return (
+    <div className="container">
+      <h3>
+        {title} {T.translate("edit_selection_plan.selection_plan")}
+        <AddNewButton entity={entity} />
+      </h3>
+      <hr />
+      <SelectionPlanForm
+        entity={entity}
+        allowedMembers={allowedMembers}
+        currentSummit={currentSummit}
+        errors={errors}
+        extraQuestionsOrder={extraQuestionsOrder}
+        extraQuestionsOrderDir={extraQuestionsOrderDir}
+        onTrackGroupLink={addTrackGroupToSelectionPlan}
+        onTrackGroupUnLink={removeTrackGroupFromSelectionPlan}
+        onSubmit={saveSelectionPlan}
+        saveSelectionPlanSettings={saveSelectionPlanSettings}
+        updateExtraQuestionOrder={onUpdateExtraQuestionOrder}
+        onAddNewExtraQuestion={onAddNewExtraQuestion}
+        onDeleteExtraQuestion={onDeleteExtraQuestion}
+        onAddEventType={addEventTypeSelectionPlan}
+        onDeleteEventType={deleteEventTypeSelectionPlan}
+        onEditExtraQuestion={onEditExtraQuestion}
+        onAddRatingType={onAddRatingType}
+        onEditRatingType={onEditRatingType}
+        onUpdateRatingTypeOrder={onUpdateRatingTypeOrder}
+        onDeleteRatingType={onDeleteRatingType}
+        onAssignExtraQuestion2SelectionPlan={assignExtraQuestion2SelectionPlan}
+        onAddProgressFlag={onAddProgressFlag}
+        onEditProgressFlag={onEditProgressFlag}
+        onAssignProgressFlag2SelectionPlan={assignProgressFlag2SelectionPlan}
+        onUnassignProgressFlag={onUnassignProgressFlag}
+        onUpdateProgressFlagOrder={onUpdateProgressFlagOrder}
+        onAllowedMemberAdd={addAllowedMemberToSelectionPlan}
+        onAllowedMemberDelete={removeAllowedMemberFromSelectionPlan}
+        onAllowedMembersPageChange={getAllowedMembers}
+        onImportAllowedMembers={importAllowedMembersCSV}
+      />
+    </div>
+  );
+};
 
 const mapStateToProps = ({
   currentSummitState,
diff --git a/yarn.lock b/yarn.lock
index e3e15533f..3b62ca6e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11048,16 +11048,7 @@ prop-types-extra@^1.0.1:
     react-is "^16.3.2"
     warning "^4.0.0"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
-  version "15.8.1"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
-  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.13.1"
-
-prop-types@^15.8.1:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==