MICROBA-534 | Remove hardcoded Demographics options, pull choices from Demographics API

[MICROBA-534]
- Pull Demographics field choices from Demographics API to support I18N/L10N effors so that we don't need duplicated choices for the fields in two places (backend and frontend)
- Refactor error detection code in DemographicsSection component

src/account-settings/data/constants.js

@@ -113,93 +113,6 @@ export function getStatesList(country) {
   return country && COUNTRY_STATES_MAP[country.toUpperCase()];
 }
 
-export const SELF_DESCRIBE = 'self-describe';
-export const DEMOGRAPHICS_GENDER_OPTIONS = [
-  '',
-  'woman',
-  'man',
-  'non-binary',
-  SELF_DESCRIBE,
-];
-
-export const OTHER = 'other';
-export const DEMOGRAPHICS_ETHNICITY_OPTIONS = [
-  'american-indian-or-alaska-native',
-  'asian',
-  'black-or-african-american',
-  'hispanic-latin-spanish',
-  'middle-eastern-or-north-african',
-  'native-hawaiian-or-pacific-islander',
-  'white',
-  OTHER,
-];
-
-export const DEMOGRAPHICS_INCOME_OPTIONS = [
-  '',
-  'less-than-10k',
-  '10k-25k',
-  '25k-50k',
-  '50k-75k',
-  '75k-100k',
-  'over-100k',
-  'unsure',
-];
-
-export const DEMOGRAPHICS_MILITARY_HISTORY_OPTIONS = [
-  '',
-  'never-served',
-  'training',
-  'active',
-  'previously-active',
-];
-
-export const DEMOGRAPHICS_EDUCATION_LEVEL_OPTIONS = [
-  '',
-  'no-high-school',
-  'some-high-school',
-  'high-school-ged-equivalent',
-  'some-college',
-  'associates',
-  'bachelors',
-  'masters',
-  'professional',
-  'doctorate',
-];
-
-export const DEMOGRAPHICS_WORK_STATUS_OPTIONS = [
-  '',
-  'full-time',
-  'part-time',
-  'self-employed',
-  'not-employed-looking',
-  'not-employed-not-looking',
-  'unable',
-  'retired',
-  'other',
-];
-
-export const DEMOGRAPHICS_WORK_SECTOR_OPTIONS = [
-  '',
-  'accommodation-food',
-  'administrative-support-waste-remediation',
-  'agriculture-forestry-fishing-hunting',
-  'arts-entertainment-recreation',
-  'construction',
-  'educational',
-  'finance-insurance',
-  'healthcare-social',
-  'information',
-  'management',
-  'manufacturing',
-  'mining-quarry-oil-gas',
-  'professional-scientific-technical',
-  'public-admin',
-  'real-estate',
-  'retail',
-  'transport-warehousing',
-  'utilities',
-  'trade',
-  'other',
-];
-
 export const DECLINED = 'declined';
+export const SELF_DESCRIBE = 'self-describe';
+export const OTHER = 'other';

src/account-settings/data/service.js

@@ -8,7 +8,7 @@ import isEmpty from 'lodash.isempty';
 import { handleRequestError, unpackFieldErrors } from './utils';
 import { getThirdPartyAuthProviders } from '../third-party-auth';
 import { getCoachingPreferences, patchCoachingPreferences } from '../coaching/data/service';
-import { getDemographics, patchDemographics } from '../demographics/data/service';
+import { getDemographics, getDemographicsOptions, patchDemographics } from '../demographics/data/service';
 import { DEMOGRAPHICS_FIELDS } from '../demographics/data/utils';
 
 const SOCIAL_PLATFORMS = [
@@ -188,6 +188,7 @@ export async function getSettings(username, userRoles, userId) {
     getConfig().COACHING_ENABLED && getCoachingPreferences(userId),
     getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && shouldDisplayDemographicsQuestions(),
     getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && getDemographics(userId),
+    getConfig().ENABLE_DEMOGRAPHICS_COLLECTION && getDemographicsOptions(),
   ]);
 
   return {
@@ -199,6 +200,7 @@ export async function getSettings(username, userRoles, userId) {
     coaching: results[5],
     shouldDisplayDemographicsSection: results[6],
     ...results[7], // demographics
+    demographicsOptions: results[8],
   };
 }
 

src/account-settings/demographics/DemographicsSection.jsx

@@ -1,12 +1,4 @@
 import {
-  DECLINED,
-  DEMOGRAPHICS_EDUCATION_LEVEL_OPTIONS,
-  DEMOGRAPHICS_ETHNICITY_OPTIONS,
-  DEMOGRAPHICS_GENDER_OPTIONS,
-  DEMOGRAPHICS_INCOME_OPTIONS,
-  DEMOGRAPHICS_MILITARY_HISTORY_OPTIONS,
-  DEMOGRAPHICS_WORK_SECTOR_OPTIONS,
-  DEMOGRAPHICS_WORK_STATUS_OPTIONS,
   OTHER,
   SELF_DESCRIBE,
 } from '../data/constants';
@@ -34,70 +26,77 @@ import messages from './DemographicsSection.messages';
 class DemographicsSection extends React.Component {
   constructor(props, context) {
     super(props, context);
-
-    this.alertRef = React.createRef();
   }
 
-  checkFormForDemographicsErrors() {
-    if(!isEmpty(this.props.formErrors.demographicsError)) {
-      return true;
-    }
-
-    return false;
+  /**
+   * Utility method that helps determine if we were able to retrieve the available options for
+   * the Demographics questions. Returns true if the `demographicsOptions` prop is _not_ empty,
+   * otherwise false. This prop being empty is indicative of a failure communicating with the
+   * Demographics IDA's API.
+   */
+  hasRetrievedDemographicsOptions() {
+    return !isEmpty(this.props.formValues.demographicsOptions);
   }
 
-  componentDidUpdate() {
-    if(this.checkFormForDemographicsErrors()) {
-      this.alertRef.current.focus();
-    }
+  /**
+   * Utility method that adds the specified message as a default option to the list of available
+   * choices.
+   * 
+   * @param {*} messageId id of message matching desired default label text
+   */
+  addDefaultOption(messageId) {
+    return [{
+      value: '',
+      label: this.props.intl.formatMessage(messages[messageId]),
+    }];
   }
-
-  getLocalizedOptions = memoize((locale) => ({
-    demographicsGenderOptions: DEMOGRAPHICS_GENDER_OPTIONS.map(key => ({
-      value: key,
-      label: this.props.intl.formatMessage(messages[`account.settings.field.demographics.gender.options.${key || 'empty'}`]),
-    })).concat(this.getDeclinedOption()),
-    demographicsEthnicityOptions: DEMOGRAPHICS_ETHNICITY_OPTIONS.map(key => ({
-      value: key,
-      label: this.props.intl.formatMessage(messages[`account.settings.field.demographics.ethnicity.options.${key || 'empty'}`]),
-    })).concat(this.getDeclinedOption()),
-    demographicsIncomeOptions: DEMOGRAPHICS_INCOME_OPTIONS.map(key => ({
-      value: key,
-      label: this.props.intl.formatMessage(messages[`account.settings.field.demographics.income.options.${key || 'empty'}`]),
-    })).concat(this.getDeclinedOption()),
-    demographicsMilitaryHistoryOptions: DEMOGRAPHICS_MILITARY_HISTORY_OPTIONS.map(key => ({
-      value: key,
-      label: this.props.intl.formatMessage(messages[`account.settings.field.demographics.military_history.options.${key || 'empty'}`]),
-    })).concat(this.getDeclinedOption()),
-    demographicsEducationLevelOptions: DEMOGRAPHICS_EDUCATION_LEVEL_OPTIONS.map(key => ({
-      value: key,
-      label: this.props.intl.formatMessage(messages[`account.settings.field.demographics.education_level.options.${key || 'empty'}`]),
-    })).concat(this.getDeclinedOption()),
-    demographicsWorkStatusOptions: DEMOGRAPHICS_WORK_STATUS_OPTIONS.map(key => ({
-      value: key,
-      label: this.props.intl.formatMessage(messages[`account.settings.field.demographics.work_status.options.${key || 'empty'}`]),
-    })).concat(this.getDeclinedOption()),
-    demographicsWorkSectorOptions: DEMOGRAPHICS_WORK_SECTOR_OPTIONS.map(key => ({
-      value: key,
-      label: this.props.intl.formatMessage(messages[`account.settings.field.demographics.work_sector.options.${key || 'empty'}`]),
-    })).concat(this.getDeclinedOption()),
+  
+  // We check the `demographicsOptions` prop to see if it is empty before we attempt to extract and
+  // format the available options for each question from the API response.
+  getApiOptions = memoize((demographicsOptions) => ( this.hasRetrievedDemographicsOptions() && {
+    demographicsGenderOptions: this.addDefaultOption('account.settings.field.demographics.gender.options.empty')
+      .concat(demographicsOptions.actions.POST.gender.choices.map(key => ({
+        value: key.value,
+        label: key.display_name
+    }))),
+    /* Ethnicity options don't need the blank/default option */
+    demographicsEthnicityOptions: demographicsOptions.actions.POST.user_ethnicity.child.children.ethnicity.choices.map(key => ({
+        value: key.value,
+        label: key.display_name
+    })),
+    demographicsIncomeOptions: this.addDefaultOption('account.settings.field.demographics.income.options.empty')
+      .concat(demographicsOptions.actions.POST.income.choices.map(key => ({
+        value: key.value,
+        label: key.display_name
+    }))),
+    demographicsMilitaryHistoryOptions: this.addDefaultOption('account.settings.field.demographics.military_history.options.empty')
+      .concat(demographicsOptions.actions.POST.military_history.choices.map(key => ({
+        value: key.value,
+        label: key.display_name
+    }))),
+    demographicsEducationLevelOptions: this.addDefaultOption('account.settings.field.demographics.education_level.options.empty')
+      .concat(demographicsOptions.actions.POST.learner_education_level.choices.map(key => ({
+        value: key.value,
+        label: key.display_name
+    }))),
+    demographicsWorkStatusOptions: this.addDefaultOption('account.settings.field.demographics.work_status.options.empty')
+      .concat(demographicsOptions.actions.POST.work_status.choices.map(key => ({
+        value: key.value,
+        label: key.display_name
+    }))),
+    demographicsWorkSectorOptions: this.addDefaultOption('account.settings.field.demographics.work_sector.options.empty')
+      .concat(demographicsOptions.actions.POST.current_work_sector.choices.map(key => ({
+        value: key.value,
+        label: key.display_name
+    }))),
   }));
 
-  getDeclinedOption() {
-    return [{
-      value: DECLINED,
-      label: this.props.intl.formatMessage(messages[`account.settings.field.demographics.options.declined`])
-    }]
-  }
-
-  ethnicityFieldDisplay = () => {
+  ethnicityFieldDisplay = (demographicsEthnicityOptions) => {
     if (get(this, 'props.formValues.demographics_user_ethnicity')) {
-      const ethnicities = this.props.formValues.demographics_user_ethnicity;
+      const ethnicities = this.props.formValues.demographics_user_ethnicity;  
       return ethnicities.map((e) => {
-        if (e == DECLINED) {
-          return this.props.intl.formatMessage(messages[`account.settings.field.demographics.options.declined`]);
-        }
-        return this.props.intl.formatMessage(messages[`account.settings.field.demographics.ethnicity.options.${e}`]);
+        var matchingOption = demographicsEthnicityOptions.filter(option => option.value === e)[0];
+        return matchingOption && matchingOption.label;
       }).join(", ")
     }
   }
@@ -123,11 +122,12 @@ class DemographicsSection extends React.Component {
 
   /**
    * If an error is encountered when trying to communicate with the Demographics IDA then we will
-   * display an Alert letting the user know that their info will not be retrieved or displayed
-   * and temporarily cannot be updated.
+   * display an Alert letting the user know that their info will not be displayed and temporarily
+   * cannot be updated.
    */
   renderDemographicsServiceIssueWarning() {
-    if (this.checkFormForDemographicsErrors()) {
+    if (!isEmpty(this.props.formErrors.demographicsError) |
+        this.hasRetrievedDemographicsOptions() == false) {
       return (
         <div
           tabIndex="-1"
@@ -160,7 +160,7 @@ class DemographicsSection extends React.Component {
       demographicsEducationLevelOptions,
       demographicsWorkStatusOptions,
       demographicsWorkSectorOptions,
-    } = this.getLocalizedOptions(this.context.locale);
+    } = this.getApiOptions(this.props.formValues.demographicsOptions);
 
     const showSelfDescribe = this.props.formValues.demographics_gender == SELF_DESCRIBE;
     const showWorkStatusDescribe = this.props.formValues.demographics_work_status == OTHER;
@@ -176,123 +176,131 @@ class DemographicsSection extends React.Component {
           </a>
         </p>
         {this.renderDemographicsServiceIssueWarning()}
-
-        <EditableField
-          name="demographics_gender"
-          type="select"
-          value={this.props.formValues.demographics_gender}
-          userSuppliedValue={showSelfDescribe ? this.props.formValues.demographics_gender_description : null}
-          options={demographicsGenderOptions}
-          label={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender'])}
-          emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender.empty'])}
-          {...editableFieldProps}
-        >
-          {showSelfDescribe &&
-            <Input
-              name='demographics_gender_description'
-              id='field-demographics_gender_description'
-              type='text'
-              placeholder={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender_description.empty'])}
-              value={this.props.formValues.demographics_gender_description}
-              onChange={(e) => this.handleEditableFieldChange(`demographics_gender_description`, e.target.value)}
-              aria-label={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender_description'])}
-              className="mt-1"
+        {/* 
+          If the demographicsOptions props are empty then there is no need to display the fields as
+          the user will not have any choices available to select, nor will they be able to update
+          their answers.
+        */}
+        { this.hasRetrievedDemographicsOptions() &&
+          <div id="demographics-fields">
+            <EditableField
+              name="demographics_gender"
+              type="select"
+              value={this.props.formValues.demographics_gender}
+              userSuppliedValue={showSelfDescribe ? this.props.formValues.demographics_gender_description : null}
+              options={demographicsGenderOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender.empty'])}
+              {...editableFieldProps}
+            >
+              {showSelfDescribe &&
+                <Input
+                  name='demographics_gender_description'
+                  id='field-demographics_gender_description'
+                  type='text'
+                  placeholder={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender_description.empty'])}
+                  value={this.props.formValues.demographics_gender_description}
+                  onChange={(e) => this.handleEditableFieldChange(`demographics_gender_description`, e.target.value)}
+                  aria-label={this.props.intl.formatMessage(messages['account.settings.field.demographics.gender_description'])}
+                  className="mt-1"
+                />
+              }
+            </EditableField>
+            <EditableField
+              name="demographics_user_ethnicity"
+              type="select"
+              hidden
+              value={this.ethnicityFieldDisplay(demographicsEthnicityOptions)}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.ethnicity'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.ethnicity.empty'])}
+              {...editableFieldProps}
+            >
+              <Checkboxes
+                id="demographics_user_ethnicity"
+                options={demographicsEthnicityOptions}
+                values={this.props.formValues.demographics_user_ethnicity}
+                {...editableFieldProps}
+              />
+            </EditableField>
+            <EditableField
+              name="demographics_income"
+              type="select"
+              value={this.props.formValues.demographics_income}
+              options={demographicsIncomeOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.income'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.income.empty'])}
+              {...editableFieldProps}
             />
-          }
-        </EditableField>
-        <EditableField
-          name="demographics_user_ethnicity"
-          type="select"
-          hidden
-          value={this.ethnicityFieldDisplay()}
-          label={this.props.intl.formatMessage(messages['account.settings.field.demographics.ethnicity'])}
-          emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.ethnicity.empty'])}
-          {...editableFieldProps}
-        >
-          <Checkboxes
-            id="demographics_user_ethnicity"
-            options={demographicsEthnicityOptions}
-            values={this.props.formValues.demographics_user_ethnicity}
-            {...editableFieldProps}
-          />
-        </EditableField>
-        <EditableField
-          name="demographics_income"
-          type="select"
-          value={this.props.formValues.demographics_income}
-          options={demographicsIncomeOptions}
-          label={this.props.intl.formatMessage(messages['account.settings.field.demographics.income'])}
-          emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.income.empty'])}
-          {...editableFieldProps}
-        />
-        <EditableField
-          name="demographics_military_history"
-          type="select"
-          value={this.props.formValues.demographics_military_history}
-          options={demographicsMilitaryHistoryOptions}
-          label={this.props.intl.formatMessage(messages['account.settings.field.demographics.military_history'])}
-          emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.military_history.empty'])}
-          {...editableFieldProps}
-        />
-        <EditableField
-          name="demographics_learner_education_level"
-          type="select"
-          value={this.props.formValues.demographics_learner_education_level}
-          options={demographicsEducationLevelOptions}
-          label={this.props.intl.formatMessage(messages['account.settings.field.demographics.learner_education_level'])}
-          emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.learner_education_level.empty'])}
-          {...editableFieldProps}
-        />
-        <EditableField
-          name="demographics_parent_education_level"
-          type="select"
-          value={this.props.formValues.demographics_parent_education_level}
-          options={demographicsEducationLevelOptions}
-          label={this.props.intl.formatMessage(messages['account.settings.field.demographics.parent_education_level'])}
-          emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.parent_education_level.empty'])}
-          {...editableFieldProps}
-        />
-        <EditableField
-          name="demographics_work_status"
-          type="select"
-          value={this.props.formValues.demographics_work_status}
-          userSuppliedValue={showWorkStatusDescribe ? this.props.formValues.demographics_work_status_description : null}
-          options={demographicsWorkStatusOptions}
-          label={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status'])}
-          emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status.empty'])}
-          {...editableFieldProps}
-        >
-          {showWorkStatusDescribe &&
-            <Input
-              name='demographics_work_status_description'
-              id='field-demographics_work_status_description'
-              type='text'
-              placeholder={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status_description.empty'])}
-              value={this.props.formValues.demographics_work_status_description}
-              onChange={(e) => this.handleEditableFieldChange(`demographics_work_status_description`, e.target.value)}
-              aria-label={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status_description'])}
-              className="mt-1"
+            <EditableField
+              name="demographics_military_history"
+              type="select"
+              value={this.props.formValues.demographics_military_history}
+              options={demographicsMilitaryHistoryOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.military_history'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.military_history.empty'])}
+              {...editableFieldProps}
             />
-          }
-        </EditableField>
-        <EditableField
-          name="demographics_current_work_sector"
-          type="select"
-          value={this.props.formValues.demographics_current_work_sector}
-          options={demographicsWorkSectorOptions}
-          label={this.props.intl.formatMessage(messages['account.settings.field.demographics.current_work_sector'])}
-          emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.current_work_sector.empty'])}
-          {...editableFieldProps}
-        />
-        <EditableField
-          name="demographics_future_work_sector"
-          type="select"
-          value={this.props.formValues.demographics_future_work_sector}
-          options={demographicsWorkSectorOptions}
-          label={this.props.intl.formatMessage(messages['account.settings.field.demographics.future_work_sector'])}
-          emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.future_work_sector.empty'])}
-          {...editableFieldProps}
-        />
+            <EditableField
+              name="demographics_learner_education_level"
+              type="select"
+              value={this.props.formValues.demographics_learner_education_level}
+              options={demographicsEducationLevelOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.learner_education_level'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.learner_education_level.empty'])}
+              {...editableFieldProps}
+            />
+            <EditableField
+              name="demographics_parent_education_level"
+              type="select"
+              value={this.props.formValues.demographics_parent_education_level}
+              options={demographicsEducationLevelOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.parent_education_level'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.parent_education_level.empty'])}
+              {...editableFieldProps}
+            />
+            <EditableField
+              name="demographics_work_status"
+              type="select"
+              value={this.props.formValues.demographics_work_status}
+              userSuppliedValue={showWorkStatusDescribe ? this.props.formValues.demographics_work_status_description : null}
+              options={demographicsWorkStatusOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status.empty'])}
+              {...editableFieldProps}
+            >
+              {showWorkStatusDescribe &&
+                <Input
+                  name='demographics_work_status_description'
+                  id='field-demographics_work_status_description'
+                  type='text'
+                  placeholder={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status_description.empty'])}
+                  value={this.props.formValues.demographics_work_status_description}
+                  onChange={(e) => this.handleEditableFieldChange(`demographics_work_status_description`, e.target.value)}
+                  aria-label={this.props.intl.formatMessage(messages['account.settings.field.demographics.work_status_description'])}
+                  className="mt-1"
+                />
+              }
+            </EditableField>
+            <EditableField
+              name="demographics_current_work_sector"
+              type="select"
+              value={this.props.formValues.demographics_current_work_sector}
+              options={demographicsWorkSectorOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.current_work_sector'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.current_work_sector.empty'])}
+              {...editableFieldProps}
+            />
+            <EditableField
+              name="demographics_future_work_sector"
+              type="select"
+              value={this.props.formValues.demographics_future_work_sector}
+              options={demographicsWorkSectorOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.demographics.future_work_sector'])}
+              emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.demographics.future_work_sector.empty'])}
+              {...editableFieldProps}
+            />
+          </div>
+        }
       </div>
     )
   }

src/account-settings/demographics/DemographicsSection.messages.jsx

@@ -1,11 +1,13 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  /* Demographics section heading */
   'account.settings.section.demographics.information': {
     id: 'account.settings.section.demographics.information',
     defaultMessage: 'Optional Information',
     description: 'The optional information section heading.',
   },
+  /* Gender identity */
   'account.settings.field.demographics.gender': {
     id: 'account.settings.field.demographics.gender',
     defaultMessage: 'Gender identity',
@@ -21,26 +23,6 @@ const messages = defineMessages({
     defaultMessage: 'Select a gender identity',
     description: 'Placeholder for the gender identity options dropdown.',
   },
-  'account.settings.field.demographics.gender.options.woman': {
-    id: 'account.settings.field.demographics.gender.options.woman',
-    defaultMessage: 'Woman',
-    description: 'The label for the woman gender identity option.',
-  },
-  'account.settings.field.demographics.gender.options.man': {
-    id: 'account.settings.field.demographics.gender.options.man',
-    defaultMessage: 'Man',
-    description: 'The label for the man gender identity option.',
-  },
-  'account.settings.field.demographics.gender.options.non-binary': {
-    id: 'account.settings.field.demographics.gender.options.non-binary',
-    defaultMessage: 'Non-binary',
-    description: 'The label for the non-binary gender identity option.',
-  },
-  'account.settings.field.demographics.gender.options.self-describe': {
-    id: 'account.settings.field.demographics.gender.options.self-describe',
-    defaultMessage: 'Prefer to self-describe',
-    description: 'The label for self-describe gender identity option.',
-  },
   'account.settings.field.demographics.gender_description': {
     id: 'account.settings.field.demographics.gender_description',
     defaultMessage: 'Gender identity description',
@@ -51,6 +33,7 @@ const messages = defineMessages({
     defaultMessage: 'Enter description',
     description: 'Placeholder for empty account settings gender identity field.',
   },
+  /* Ethnicity */
   'account.settings.field.demographics.ethnicity': {
     id: 'account.settings.field.demographics.ethnicity',
     defaultMessage: 'Race/Ethnicity identity',
@@ -66,46 +49,7 @@ const messages = defineMessages({
     defaultMessage: 'Select all that apply', // TODO: Is this the desired text?
     description: 'Placeholder for the ethnic background options field.',
   },
-  'account.settings.field.demographics.ethnicity.options.american-indian-or-alaska-native': {
-    id: 'account.settings.field.demographics.ethnicity.options.american-indian-or-alaska-native',
-    defaultMessage: 'American Indian or Alaska Native',
-    description: 'The label for the American Indian or Alaska Native ethnicity option.',
-  },
-  'account.settings.field.demographics.ethnicity.options.asian': {
-    id: 'account.settings.field.demographics.ethnicity.options.asian',
-    defaultMessage: 'Asian',
-    description: 'The label for the Asian ethnicity option.',
-  },
-  'account.settings.field.demographics.ethnicity.options.black-or-african-american': {
-    id: 'account.settings.field.demographics.ethnicity.options.black-or-african-american',
-    defaultMessage: 'Black or African American',
-    description: 'The label for the Black or African American ethnicity option.',
-  },
-  'account.settings.field.demographics.ethnicity.options.hispanic-latin-spanish': {
-    id: 'account.settings.field.demographics.ethnicity.options.hispanic-latin-spanish',
-    defaultMessage: 'Hispanic, Latin, or Spanish origin',
-    description: 'The label for the Hispanic, Latin, or Spanish origin ethnicity option.',
-  },
-  'account.settings.field.demographics.ethnicity.options.middle-eastern-or-north-african': {
-    id: 'account.settings.field.demographics.ethnicity.options.middle-eastern-or-north-african',
-    defaultMessage: 'Middle Eastern or North African',
-    description: 'The label for the Middle Eastern or North African ethnicity option.',
-  },
-  'account.settings.field.demographics.ethnicity.options.native-hawaiian-or-pacific-islander': {
-    id: 'account.settings.field.demographics.ethnicity.options.native-hawaiian-or-pacific-islander',
-    defaultMessage: 'Native Hawaiian or Other Pacific Islander',
-    description: 'The label for the Native Hawaiian or Other Pacific Islander ethnicity option.',
-  },
-  'account.settings.field.demographics.ethnicity.options.white': {
-    id: 'account.settings.field.demographics.ethnicity.options.white',
-    defaultMessage: 'White',
-    description: 'The label for the White ethnicity option.',
-  },
-  'account.settings.field.demographics.ethnicity.options.other': {
-    id: 'account.settings.field.demographics.ethnicity.options.other',
-    defaultMessage: 'Some other race, ethnicity, or origin',
-    description: 'The label for the Some other race, ethnicity, or origin ethnicity option.',
-  },
+  /* Income */
   'account.settings.field.demographics.income': {
     id: 'account.settings.field.demographics.income',
     defaultMessage: 'Family income',
@@ -121,41 +65,7 @@ const messages = defineMessages({
     defaultMessage: 'Select a family income range',
     description: 'Placeholder for the household income dropdown.',
   },
-  'account.settings.field.demographics.income.options.less-than-10k': {
-    id: 'account.settings.field.demographics.income.options.less-than-10k',
-    defaultMessage: 'Less than US $10,000',
-    description: 'The label for the less than US $10,000 income option.',
-  },
-  'account.settings.field.demographics.income.options.10k-25k': {
-    id: 'account.settings.field.demographics.income.options.10k-25k',
-    defaultMessage: 'US $10,000 - $25,000',
-    description: 'The label for the US $10,000 - $25,000 income option.',
-  },
-  'account.settings.field.demographics.income.options.25k-50k': {
-    id: 'account.settings.field.demographics.income.options.25k-50k',
-    defaultMessage: 'US $25,000 - $50,000',
-    description: 'The label for the US $25,000 - $50,000 income option.',
-  },
-  'account.settings.field.demographics.income.options.50k-75k': {
-    id: 'account.settings.field.demographics.income.options.50k-75k',
-    defaultMessage: 'US $50,000 - $75,000',
-    description: 'The label for the US $50,000 - $75,000 income option.',
-  },
-  'account.settings.field.demographics.income.options.75k-100k': {
-    id: 'account.settings.field.demographics.income.options.75k-100k',
-    defaultMessage: 'US $75,000 - $100,000',
-    description: 'The label for the US $75,000 - $100,000 income option.',
-  },
-  'account.settings.field.demographics.income.options.over-100k': {
-    id: 'account.settings.field.demographics.income.options.over-100k',
-    defaultMessage: 'Over US $100,000',
-    description: 'The label for the over US $100,000 income option.',
-  },
-  'account.settings.field.demographics.income.options.unsure': {
-    id: 'account.settings.field.demographics.income.options.unsure',
-    defaultMessage: 'I don\'t know',
-    description: 'The label for the I don\'t know income option.',
-  },
+  /* Military history */
   'account.settings.field.demographics.military_history': {
     id: 'account.settings.field.demographics.military_history',
     defaultMessage: 'U.S. Military status',
@@ -171,26 +81,7 @@ const messages = defineMessages({
     defaultMessage: 'Select military status',
     description: 'Placeholder for the military history dropdown.',
   },
-  'account.settings.field.demographics.military_history.options.never-served': {
-    id: 'account.settings.field.demographics.income.options.never-served',
-    defaultMessage: 'Never served in the military',
-    description: 'The label for the never served in the military military history option.',
-  },
-  'account.settings.field.demographics.military_history.options.training': {
-    id: 'account.settings.field.demographics.income.options.training',
-    defaultMessage: 'Only on active duty for training',
-    description: 'The label for the only on active duty for training military history option.',
-  },
-  'account.settings.field.demographics.military_history.options.active': {
-    id: 'account.settings.field.demographics.income.options.active',
-    defaultMessage: 'Now on active duty',
-    description: 'The label for the now on active duty military history option.',
-  },
-  'account.settings.field.demographics.military_history.options.previously-active': {
-    id: 'account.settings.field.demographics.income.options.previously-active',
-    defaultMessage: 'On active duty in the past, but not now',
-    description: 'The label for the on active duty in the past, but not now military history option.',
-  },
+  /* Learner and family education level */
   'account.settings.field.demographics.learner_education_level': {
     id: 'account.settings.field.demographics.learner_education_level',
     defaultMessage: 'Your education level',
@@ -216,51 +107,7 @@ const messages = defineMessages({
     defaultMessage: 'Select education level',
     description: 'Placeholder for the education level options dropdown.',
   },
-  'account.settings.field.demographics.education_level.options.no-high-school': {
-    id: 'account.settings.field.demographics.education_level.options.no-high-school',
-    defaultMessage: 'No High School',
-    description: 'The label for the no high school education level option.',
-  },
-  'account.settings.field.demographics.education_level.options.some-high-school': {
-    id: 'account.settings.field.demographics.education_level.options.some-high-school',
-    defaultMessage: 'Some High School',
-    description: 'The label for the some high school education level option.',
-  },
-  'account.settings.field.demographics.education_level.options.high-school-ged-equivalent': {
-    id: 'account.settings.field.demographics.education_level.options.high-school-ged-equivalent',
-    defaultMessage: 'High School diploma, GED, or equivalent',
-    description: 'The label for the high school diploma, GED, or equivalent education level option.',
-  },
-  'account.settings.field.demographics.education_level.options.some-college': {
-    id: 'account.settings.field.demographics.education_level.options.some-college',
-    defaultMessage: 'Some college, but no degree',
-    description: 'The label for the some college, but no degree education level option.',
-  },
-  'account.settings.field.demographics.education_level.options.associates': {
-    id: 'account.settings.field.demographics.education_level.options.associates',
-    defaultMessage: 'Associates degree',
-    description: 'The label for the Associates degree education level option.',
-  },
-  'account.settings.field.demographics.education_level.options.bachelors': {
-    id: 'account.settings.field.demographics.education_level.options.bachelors',
-    defaultMessage: 'Bachelors degree',
-    description: 'The label for the Bachelors degree education level option.',
-  },
-  'account.settings.field.demographics.education_level.options.masters': {
-    id: 'account.settings.field.demographics.education_level.options.masters',
-    defaultMessage: 'Masters degree',
-    description: 'The label for the Masters degree education level option.',
-  },
-  'account.settings.field.demographics.education_level.options.professional': {
-    id: 'account.settings.field.demographics.education_level.options.professional',
-    defaultMessage: 'Professional degree',
-    description: 'The label for the Professional degree education level option.',
-  },
-  'account.settings.field.demographics.education_level.options.doctorate': {
-    id: 'account.settings.field.demographics.education_level.options.doctorate',
-    defaultMessage: 'Doctorate degree',
-    description: 'The label for the Doctorate degree education level option.',
-  },
+  /* Work status */
   'account.settings.field.demographics.work_status': {
     id: 'account.settings.field.demographics.work_status',
     defaultMessage: 'Employment status',
@@ -276,46 +123,6 @@ const messages = defineMessages({
     defaultMessage: 'Select employment status',
     description: 'Placeholder for the work status options dropdown.',
   },
-  'account.settings.field.demographics.work_status.options.full-time': {
-    id: 'account.settings.field.demographics.work_status.options.full-time',
-    defaultMessage: 'Employed, working full-time',
-    description: 'The label for the employed, working full-time work status option.',
-  },
-  'account.settings.field.demographics.work_status.options.part-time': {
-    id: 'account.settings.field.demographics.work_status.options.part-time',
-    defaultMessage: 'Employed, working part-time',
-    description: 'The label for the employed, working part-time work status option.',
-  },
-  'account.settings.field.demographics.work_status.options.self-employed': {
-    id: 'account.settings.field.demographics.work_status.options.self-employed',
-    defaultMessage: 'Self-Employed',
-    description: 'The label for the self-employed work status option.',
-  },
-  'account.settings.field.demographics.work_status.options.not-employed-looking': {
-    id: 'account.settings.field.demographics.work_status.options.not-employed-looking',
-    defaultMessage: 'Not employed, looking for work',
-    description: 'The label for the not employed, looking for work work status option.',
-  },
-  'account.settings.field.demographics.work_status.options.not-employed-not-looking': {
-    id: 'account.settings.field.demographics.work_status.options.not-employed-not-looking',
-    defaultMessage: 'Not employed, not looking for work',
-    description: 'The label for the not employed, not looking for work work status option.',
-  },
-  'account.settings.field.demographics.work_status.options.unable': {
-    id: 'account.settings.field.demographics.work_status.options.unable',
-    defaultMessage: 'Unable to work',
-    description: 'The label for the unable to work work status option.',
-  },
-  'account.settings.field.demographics.work_status.options.retired': {
-    id: 'account.settings.field.demographics.work_status.options.retired',
-    defaultMessage: 'Retired',
-    description: 'The label for the retired work status option.',
-  },
-  'account.settings.field.demographics.work_status.options.other': {
-    id: 'account.settings.field.demographics.work_status.options.other',
-    defaultMessage: 'Other',
-    description: 'The label for the other work status option.',
-  },
   'account.settings.field.demographics.work_status_description': {
     id: 'account.settings.field.demographics.work_status_description',
     defaultMessage: 'Employment status description',
@@ -326,6 +133,7 @@ const messages = defineMessages({
     defaultMessage: 'Enter description',
     description: 'Placeholder for empty account settings work status description field.',
   },
+  /* Work sector */
   'account.settings.field.demographics.current_work_sector': {
     id: 'account.settings.field.demographics.current_work_sector',
     defaultMessage: 'Current work industry',
@@ -351,111 +159,7 @@ const messages = defineMessages({
     defaultMessage: 'Select work industry',
     description: 'Placeholder for the work sector options dropdown.',
   },
-  'account.settings.field.demographics.work_sector.options.accommodation-food': {
-    id: 'account.settings.field.demographics.work_sector.options.accommodation-food',
-    defaultMessage: 'Accommodation and Food Services',
-    description: 'The label for the Accommodation and Food Services work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.administrative-support-waste-remediation': {
-    id: 'account.settings.field.demographics.work_sector.options.administrative-support-waste-remediation',
-    defaultMessage: 'Administrative and Support and Waste Management and Remediation Services',
-    description: 'The label for the Administrative and Support and Waste Management and Remediation Services work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.agriculture-forestry-fishing-hunting': {
-    id: 'account.settings.field.demographics.work_sector.options.agriculture-forestry-fishing-hunting',
-    defaultMessage: 'Agriculture, Forestry, Fishing and Hunting',
-    description: 'The label for the Agriculture, Forestry, Fishing and Hunting work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.arts-entertainment-recreation': {
-    id: 'account.settings.field.demographics.work_sector.options.arts-entertainment-recreation',
-    defaultMessage: 'Arts, Entertainment, and Recreation',
-    description: 'The label for the Arts, Entertainment, and Recreation work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.construction': {
-    id: 'account.settings.field.demographics.work_sector.options.construction',
-    defaultMessage: 'Construction',
-    description: 'The label for the Construction work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.educational': {
-    id: 'account.settings.field.demographics.work_sector.options.educational',
-    defaultMessage: 'Education Services',
-    description: 'The label for the Education Services work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.finance-insurance': {
-    id: 'account.settings.field.demographics.work_sector.options.finance-insurance',
-    defaultMessage: 'Finance and Insurance',
-    description: 'The label for the Finance and Insurance work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.healthcare-social': {
-    id: 'account.settings.field.demographics.work_sector.options.healthcare-social',
-    defaultMessage: 'Health Care and Social Assistance',
-    description: 'The label for the Health Care and Social Assistance work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.information': {
-    id: 'account.settings.field.demographics.work_sector.options.information',
-    defaultMessage: 'Information',
-    description: 'The label for the Information work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.management': {
-    id: 'account.settings.field.demographics.work_sector.options.management',
-    defaultMessage: 'Management of Companies and Enterprises',
-    description: 'The label for the Management of Companies and Enterprises work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.manufacturing': {
-    id: 'account.settings.field.demographics.work_sector.options.manufacturing',
-    defaultMessage: 'Manufacturing',
-    description: 'The label for the Manufacturing work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.mining-quarry-oil-gas': {
-    id: 'account.settings.field.demographics.work_sector.options.mining-quarry-oil-gas',
-    defaultMessage: 'Mining, Quarrying, and Oil and Gas Extraction',
-    description: 'The label for the Mining, Quarrying, and Oil and Gas Extraction work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.professional-scientific-technical': {
-    id: 'account.settings.field.demographics.work_sector.options.professional-scientific-technical',
-    defaultMessage: 'Professional, Scientific, and Technical Services',
-    description: 'The label for the Professional, Scientific, and Technical Services work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.public-admin': {
-    id: 'account.settings.field.demographics.work_sector.options.public-admin',
-    defaultMessage: 'Public Administration',
-    description: 'The label for the Public Administration work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.real-estate': {
-    id: 'account.settings.field.demographics.work_sector.options.real-estate',
-    defaultMessage: 'Real Estate and Rental and Leasing',
-    description: 'The label for the Real Estate and Rental and Leasing work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.retail': {
-    id: 'account.settings.field.demographics.work_sector.options.retail',
-    defaultMessage: 'Retail Trade',
-    description: 'The label for the Retail Trade work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.transport-warehousing': {
-    id: 'account.settings.field.demographics.work_sector.options.transport-warehousing',
-    defaultMessage: 'Transportation and Warehousing',
-    description: 'The label for the Transportation and Warehousing work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.utilities': {
-    id: 'account.settings.field.demographics.work_sector.options.utilities',
-    defaultMessage: 'Utilities',
-    description: 'The label for the Utilities work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.trade': {
-    id: 'account.settings.field.demographics.work_sector.options.trade',
-    defaultMessage: 'Wholesale Trade',
-    description: 'The label for the Wholesale Trade work sector option.',
-  },
-  'account.settings.field.demographics.work_sector.options.other': {
-    id: 'account.settings.field.demographics.work_sector.options.other',
-    defaultMessage: 'Other',
-    description: 'The label for the Other work sector option.',
-  },
-  'account.settings.field.demographics.options.declined': {
-    id: 'account.settings.field.demographics.options.declined',
-    defaultMessage: 'Prefer not to respond',
-    description: 'The label for the declined option.',
-  },
+  /* Legal copy link text */
   'account.settings.section.demographics.why': {
     id: 'account.settings.section.demographics.why',
     defaultMessage: 'Why does edX collect this information?',

src/account-settings/demographics/data/service.js

@@ -120,3 +120,22 @@ export async function patchDemographics(userId, commitValues) {
 
   return convertData(data, FROM);
 }
+
+/**
+ * retrieve the options for each field from the Demographics API
+ */
+export async function getDemographicsOptions() {
+  const requestUrl = `${getConfig().DEMOGRAPHICS_BASE_URL}/demographics/api/v1/demographics/`;
+  let data = {};
+
+  try {
+    ({ data } = await getAuthenticatedHttpClient().options(requestUrl));
+  } catch (error) {
+    // We are catching and suppressing errors here on purpose. If an error occurs during the
+    // getDemographicsOptions call we will pass back an empty `data` object. Downstream we make
+    // the assumption that if the demographicsOptions object is empty that there was an issue or
+    // error communicating with the service/API.
+  }
+
+  return data;
+}

src/account-settings/demographics/test/DemographicsSection.test.jsx

@@ -44,7 +44,447 @@ describe('DemographicsSection', () => {
                 demographics_work_status_description: '',
                 demographics_current_work_sector: 'declined',
                 demographics_future_work_sector: 'declined',
-                demographics_user: 1,  
+                demographics_user: 1,
+                demographicsOptions: {
+                    actions: {
+                        POST: {
+                            gender: {
+                                choices: [
+                                    {
+                                        "value": "woman",
+                                        "display_name": "Woman"
+                                      },
+                                      {
+                                        "value": "man",
+                                        "display_name": "Man"
+                                      },
+                                      {
+                                        "value": "non-binary",
+                                        "display_name": "Non-binary"
+                                      },
+                                      {
+                                        "value": "self-describe",
+                                        "display_name": "Prefer to self describe"
+                                      },
+                                      {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                      }
+                                ]
+                            },
+                            income: {
+                                choices: [
+                                    {
+                                        "value": "less-than-10k",
+                                        "display_name": "Less than US $10,000"
+                                    },
+                                    {
+                                        "value": "10k-25k",
+                                        "display_name": "US $10,000 - $25,000"
+                                    },
+                                    {
+                                        "value": "25k-50k",
+                                        "display_name": "US $25,000 - $50,000"
+                                    },
+                                    {
+                                        "value": "50k-75k",
+                                        "display_name": "US $50,000 - $75,000"
+                                    },
+                                    {
+                                        "value": "75k-100k",
+                                        "display_name": "US $75,000 - $100,000"
+                                    },
+                                    {
+                                        "value": "over-100k",
+                                        "display_name": "Over US $100,000"
+                                    },
+                                    {
+                                        "value": "unsure",
+                                        "display_name": "I don't know"
+                                    },
+                                    {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                    }                                    
+                                ]
+                            },
+                            learner_education_level: {
+                                choices: [
+                                    {
+                                        "value": "no-high-school",
+                                        "display_name": "No High School"
+                                    },
+                                    {
+                                        "value": "some-high-school",
+                                        "display_name": "Some High School"
+                                    },
+                                    {
+                                        "value": "high-school-ged-equivalent",
+                                        "display_name": "High School diploma, GED, or equivalent"
+                                    },
+                                    {
+                                        "value": "some-college",
+                                        "display_name": "Some college, but no degree"
+                                    },
+                                    {
+                                        "value": "associates",
+                                        "display_name": "Associates degree"
+                                    },
+                                    {
+                                        "value": "bachelors",
+                                        "display_name": "Bachelors degree"
+                                    },
+                                    {
+                                        "value": "masters",
+                                        "display_name": "Masters degree"
+                                    },
+                                    {
+                                        "value": "professional",
+                                        "display_name": "Professional degree"
+                                    },
+                                    {
+                                        "value": "doctorate",
+                                        "display_name": "Doctorate degree"
+                                    },
+                                    {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                    }
+                                ]
+                            },
+                            parent_education_level: {
+                                choices: [
+                                    {
+                                        "value": "no-high-school",
+                                        "display_name": "No High School"
+                                    },
+                                    {
+                                        "value": "some-high-school",
+                                        "display_name": "Some High School"
+                                    },
+                                    {
+                                        "value": "high-school-ged-equivalent",
+                                        "display_name": "High School diploma, GED, or equivalent"
+                                    },
+                                    {
+                                        "value": "some-college",
+                                        "display_name": "Some college, but no degree"
+                                    },
+                                    {
+                                        "value": "associates",
+                                        "display_name": "Associates degree"
+                                    },
+                                    {
+                                        "value": "bachelors",
+                                        "display_name": "Bachelors degree"
+                                    },
+                                    {
+                                        "value": "masters",
+                                        "display_name": "Masters degree"
+                                    },
+                                    {
+                                        "value": "professional",
+                                        "display_name": "Professional degree"
+                                    },
+                                    {
+                                        "value": "doctorate",
+                                        "display_name": "Doctorate degree"
+                                    },
+                                    {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                    }
+                                ]
+                            },
+                            military_history: {
+                                choices: [
+                                    {
+                                        "value": "never-served",
+                                        "display_name": "Never served in the military"
+                                    },
+                                    {
+                                        "value": "training",
+                                        "display_name": "Only on active duty for training"
+                                    },
+                                    {
+                                        "value": "active",
+                                        "display_name": "Now on active duty"
+                                    },
+                                    {
+                                        "value": "previously-active",
+                                        "display_name": "On active duty in the past, but not now"
+                                    },
+                                    {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                    }
+                                ]
+                            },
+                            work_status: {
+                                choices: [
+                                    {
+                                        "value": "full-time",
+                                        "display_name": "Employed, working full-time"
+                                    },
+                                    {
+                                        "value": "part-time",
+                                        "display_name": "Employed, working part-time"
+                                    },
+                                    {
+                                        "value": "self-employed",
+                                        "display_name": "Self-Employed"
+                                    },
+                                    {
+                                        "value": "not-employed-looking",
+                                        "display_name": "Not employed, looking for work"
+                                    },
+                                    {
+                                        "value": "not-employed-not-looking",
+                                        "display_name": "Not employed, not looking for work"
+                                    },
+                                    {
+                                        "value": "unable",
+                                        "display_name": "Unable to work"
+                                    },
+                                    {
+                                        "value": "retired",
+                                        "display_name": "Retired"
+                                    },
+                                    {
+                                        "value": "other",
+                                        "display_name": "Other"
+                                    },
+                                    {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                    }                                    
+                                ]
+                            },
+                            current_work_sector: {
+                                choices: [
+                                    {
+                                        "value": "accommodation-food",
+                                        "display_name": "Accommodation and Food Services"
+                                    },
+                                    {
+                                        "value": "administrative-support-waste-remediation",
+                                        "display_name": "Administrative and Support and Waste Management and Remediation Services"
+                                    },
+                                    {
+                                        "value": "agriculture-forestry-fishing-hunting",
+                                        "display_name": "Agriculture, Forestry, Fishing and Hunting"
+                                    },
+                                    {
+                                        "value": "arts-entertainment-recreation",
+                                        "display_name": "Arts, Entertainment, and Recreation"
+                                    },
+                                    {
+                                        "value": "construction",
+                                        "display_name": "Construction"
+                                    },
+                                    {
+                                        "value": "educational",
+                                        "display_name": "Education Services"
+                                    },
+                                    {
+                                        "value": "finance-insurance",
+                                        "display_name": "Finance and Insurance"
+                                    },
+                                    {
+                                        "value": "healthcare-social",
+                                        "display_name": "Health Care and Social Assistance"
+                                    },
+                                    {
+                                        "value": "information",
+                                        "display_name": "Information"
+                                    },
+                                    {
+                                        "value": "management",
+                                        "display_name": "Management of Companies and Enterprises"
+                                    },
+                                    {
+                                        "value": "manufacturing",
+                                        "display_name": "Manufacturing"
+                                    },
+                                    {
+                                        "value": "mining-quarry-oil-gas",
+                                        "display_name": "Mining, Quarrying, and Oil and Gas Extraction"
+                                    },
+                                    {
+                                        "value": "professional-scientific-technical",
+                                        "display_name": "Professional, Scientific, and Technical Services"
+                                    },
+                                    {
+                                        "value": "public-admin",
+                                        "display_name": "Public Administration"
+                                    },
+                                    {
+                                        "value": "real-estate",
+                                        "display_name": "Real Estate and Rental and Leasing"
+                                    },
+                                    {
+                                        "value": "retail",
+                                        "display_name": "Retail Trade"
+                                    },
+                                    {
+                                        "value": "transport-warehousing",
+                                        "display_name": "Transportation and Warehousing"
+                                    },
+                                    {
+                                        "value": "utilities",
+                                        "display_name": "Utilities"
+                                    },
+                                    {
+                                        "value": "trade",
+                                        "display_name": "Wholesale Trade"
+                                    },
+                                    {
+                                        "value": "other",
+                                        "display_name": "Other"
+                                    },
+                                    {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                    }                                    
+                                ]
+                            },
+                            future_work_sector: {
+                                choices: [
+                                    {
+                                        "value": "accommodation-food",
+                                        "display_name": "Accommodation and Food Services"
+                                    },
+                                    {
+                                        "value": "administrative-support-waste-remediation",
+                                        "display_name": "Administrative and Support and Waste Management and Remediation Services"
+                                    },
+                                    {
+                                        "value": "agriculture-forestry-fishing-hunting",
+                                        "display_name": "Agriculture, Forestry, Fishing and Hunting"
+                                    },
+                                    {
+                                        "value": "arts-entertainment-recreation",
+                                        "display_name": "Arts, Entertainment, and Recreation"
+                                    },
+                                    {
+                                        "value": "construction",
+                                        "display_name": "Construction"
+                                    },
+                                    {
+                                        "value": "educational",
+                                        "display_name": "Education Services"
+                                    },
+                                    {
+                                        "value": "finance-insurance",
+                                        "display_name": "Finance and Insurance"
+                                    },
+                                    {
+                                        "value": "healthcare-social",
+                                        "display_name": "Health Care and Social Assistance"
+                                    },
+                                    {
+                                        "value": "information",
+                                        "display_name": "Information"
+                                    },
+                                    {
+                                        "value": "management",
+                                        "display_name": "Management of Companies and Enterprises"
+                                    },
+                                    {
+                                        "value": "manufacturing",
+                                        "display_name": "Manufacturing"
+                                    },
+                                    {
+                                        "value": "mining-quarry-oil-gas",
+                                        "display_name": "Mining, Quarrying, and Oil and Gas Extraction"
+                                    },
+                                    {
+                                        "value": "professional-scientific-technical",
+                                        "display_name": "Professional, Scientific, and Technical Services"
+                                    },
+                                    {
+                                        "value": "public-admin",
+                                        "display_name": "Public Administration"
+                                    },
+                                    {
+                                        "value": "real-estate",
+                                        "display_name": "Real Estate and Rental and Leasing"
+                                    },
+                                    {
+                                        "value": "retail",
+                                        "display_name": "Retail Trade"
+                                    },
+                                    {
+                                        "value": "transport-warehousing",
+                                        "display_name": "Transportation and Warehousing"
+                                    },
+                                    {
+                                        "value": "utilities",
+                                        "display_name": "Utilities"
+                                    },
+                                    {
+                                        "value": "trade",
+                                        "display_name": "Wholesale Trade"
+                                    },
+                                    {
+                                        "value": "other",
+                                        "display_name": "Other"
+                                    },
+                                    {
+                                        "value": "declined",
+                                        "display_name": "Prefer not to respond"
+                                    }                                    
+                                ]
+                            },
+                            user_ethnicity: {
+                                child: {
+                                    children: {
+                                        ethnicity: {
+                                            choices: [
+                                                {
+                                                    "value": "american-indian-or-alaska-native",
+                                                    "display_name": "American Indian or Alaska Native"
+                                                  },
+                                                  {
+                                                    "value": "asian",
+                                                    "display_name": "Asian"
+                                                  },
+                                                  {
+                                                    "value": "black-or-african-american",
+                                                    "display_name": "Black or African American"
+                                                  },
+                                                  {
+                                                    "value": "hispanic-latin-spanish",
+                                                    "display_name": "Hispanic, Latin, or Spanish origin"
+                                                  },
+                                                  {
+                                                    "value": "middle-eastern-or-north-african",
+                                                    "display_name": "Middle Eastern or North African"
+                                                  },
+                                                  {
+                                                    "value": "native-hawaiian-or-pacific-islander",
+                                                    "display_name": "Native Hawaiian or Other Pacific Islander"
+                                                  },
+                                                  {
+                                                    "value": "white",
+                                                    "display_name": "White"
+                                                  },
+                                                  {
+                                                    "value": "other",
+                                                    "display_name": "Some other race, ethnicity, or origin"
+                                                  },
+                                                  {
+                                                    "value": "declined",
+                                                    "display_name": "Prefer not to respond"
+                                                  }
+                                            ]
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
             },
             formErrors: {},
             intl: {},
@@ -79,6 +519,7 @@ describe('DemographicsSection', () => {
         props = {
             ...props,
             formValues: {
+                ...props.formValues,
                 demographics_gender: 'self-describe',
                 demographics_gender_description: 'test',
             },
@@ -92,6 +533,7 @@ describe('DemographicsSection', () => {
         props = {
             ...props,
             formValues: {
+                ...props.formValues,
                 demographics_work_status: 'other',
                 demographics_work_status_description: 'test',
             }
@@ -105,6 +547,7 @@ describe('DemographicsSection', () => {
         props = {
             ...props,
             formValues: {
+                ...props.formValues,
                 demographics_user_ethnicity: ['asian']
             }
         }
@@ -117,6 +560,7 @@ describe('DemographicsSection', () => {
         props = {
             ...props,
             formValues: {
+                ...props.formValues,
                 demographics_user_ethnicity: ['hispanic-latin-spanish', 'white']
             }
         }
@@ -124,4 +568,16 @@ describe('DemographicsSection', () => {
         const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
         expect(wrapper).toMatchSnapshot();
     });
+
+    it('should render an Alert when demographicsOptions props are empty', () => {
+        props = {
+            ...props,
+            formValues: {
+                demographicsOptions: ""
+            }
+        }
+
+        const wrapper = renderer.create(reduxWrapper(<IntlDemographicsSection {...props} />)).toJSON();
+        expect(wrapper).toMatchSnapshot();
+    });
 });

src/account-settings/demographics/test/__snapshots__/DemographicsSection.test.jsx.snap

@@ -19,568 +19,572 @@ exports[`DemographicsSection should render 1`] = `
     </a>
   </p>
   <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
+    id="demographics-fields"
   >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Gender identity
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Gender identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Race/Ethnicity identity
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            <button
+              className="btn btn-link p-0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              Add race/ethnicity identity
+            </button>
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add race/ethnicity identity
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Family income
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Family income
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            U.S. Military status
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              U.S. Military status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Your education level
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Your education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Parents/Guardians education level
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Employment status
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Employment status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Current work industry
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Current work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Future work industry
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Future work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
   </div>
@@ -620,568 +624,607 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
     </div>
   </div>
   <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
+    id="demographics-fields"
   >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Gender identity
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Gender identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            <button
+              className="btn btn-link p-0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              Add race/ethnicity identity
+            </button>
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Family income
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              U.S. Military status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Your education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Employment status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Current work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="pgn-transition-replace-group position-relative"
+      style={
+        Object {
+          "height": null,
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
+      >
+        <div
+          className="form-group"
+        >
+          <div
+            className="d-flex align-items-start"
+          >
+            <h6
+              aria-level="3"
+            >
+              Future work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
   </div>
+</div>
+`;
+
+exports[`DemographicsSection should render an Alert when demographicsOptions props are empty 1`] = `
+<div
+  className="account-section"
+  id="demographics-information"
+>
+  <h2
+    className="section-heading"
+  >
+    Optional Information
+  </h2>
+  <p>
+    <a
+      href="http://localhost:5335/demographics"
+      target="_blank"
+    >
+      Why does edX collect this information?
+    </a>
+  </p>
   <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
+    tabIndex="-1"
   >
     <div
-      style={
-        Object {
-          "padding": ".1px 0",
-        }
-      }
+      className="alert d-flex align-items-start alert alert-danger"
     >
-      <div
-        className="form-group"
-      >
-        <div
-          className="d-flex align-items-start"
-        >
-          <h6
-            aria-level="3"
-          >
-            Race/Ethnicity identity
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
-                style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
-        </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add race/ethnicity identity
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
-    <div
-      style={
-        Object {
-          "padding": ".1px 0",
-        }
-      }
-    >
-      <div
-        className="form-group"
-      >
-        <div
-          className="d-flex align-items-start"
-        >
-          <h6
-            aria-level="3"
-          >
-            Family income
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
-                style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
-        </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
-    <div
-      style={
-        Object {
-          "padding": ".1px 0",
-        }
-      }
-    >
-      <div
-        className="form-group"
-      >
-        <div
-          className="d-flex align-items-start"
-        >
-          <h6
-            aria-level="3"
-          >
-            U.S. Military status
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
-                style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
-        </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
-    <div
-      style={
-        Object {
-          "padding": ".1px 0",
-        }
-      }
-    >
-      <div
-        className="form-group"
-      >
-        <div
-          className="d-flex align-items-start"
-        >
-          <h6
-            aria-level="3"
-          >
-            Your education level
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
-                style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
-        </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
-    <div
-      style={
-        Object {
-          "padding": ".1px 0",
-        }
-      }
-    >
-      <div
-        className="form-group"
-      >
-        <div
-          className="d-flex align-items-start"
-        >
-          <h6
-            aria-level="3"
-          >
-            Parents/Guardians education level
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
-                style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
-        </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
-    <div
-      style={
-        Object {
-          "padding": ".1px 0",
-        }
-      }
-    >
-      <div
-        className="form-group"
-      >
-        <div
-          className="d-flex align-items-start"
-        >
-          <h6
-            aria-level="3"
-          >
-            Employment status
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
-                style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
-        </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
-    <div
-      style={
-        Object {
-          "padding": ".1px 0",
-        }
-      }
-    >
-      <div
-        className="form-group"
-      >
-        <div
-          className="d-flex align-items-start"
-        >
-          <h6
-            aria-level="3"
-          >
-            Current work industry
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
-                style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
-        </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
-    <div
-      style={
-        Object {
-          "padding": ".1px 0",
-        }
-      }
-    >
-      <div
-        className="form-group"
-      >
-        <div
-          className="d-flex align-items-start"
-        >
-          <h6
-            aria-level="3"
-          >
-            Future work industry
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
-                style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
-        </div>
-        <p>
-          Prefer not to respond
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
+      <div />
+      <div>
+        <span>
+          An error occurred attempting to retrieve or save your account information. Please try again later.
+        </span>
       </div>
     </div>
   </div>
@@ -1207,624 +1250,564 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
     </a>
   </p>
   <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
+    id="demographics-fields"
   >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Gender identity
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Gender identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add gender identity
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Race/Ethnicity identity
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Hispanic, Latin, or Spanish origin, White
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          Hispanic, Latin, or Spanish origin, White
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Family income
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Family income
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add family income
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            U.S. Military status
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              U.S. Military status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add military status
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Your education level
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Your education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add education level
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Parents/Guardians education level
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add education level
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Employment status
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Employment status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add employment status
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Current work industry
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Current work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add work industry
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Future work industry
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Future work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add work industry
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
   </div>
@@ -1850,624 +1833,564 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
     </a>
   </p>
   <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
+    id="demographics-fields"
   >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Gender identity
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Gender identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add gender identity
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Race/Ethnicity identity
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Asian
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          Asian
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Family income
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Family income
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add family income
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            U.S. Military status
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              U.S. Military status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add military status
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Your education level
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Your education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add education level
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Parents/Guardians education level
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add education level
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Employment status
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Employment status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add employment status
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Current work industry
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Current work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add work industry
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Future work industry
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Future work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add work industry
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
   </div>
@@ -2493,624 +2416,572 @@ exports[`DemographicsSection should set user input correctly when user provides
     </a>
   </p>
   <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
+    id="demographics-fields"
   >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Gender identity
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Gender identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add gender identity
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Race/Ethnicity identity
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            <button
+              className="btn btn-link p-0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              Add race/ethnicity identity
+            </button>
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add race/ethnicity identity
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Family income
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Family income
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add family income
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            U.S. Military status
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              U.S. Military status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add military status
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Your education level
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Your education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add education level
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Parents/Guardians education level
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add education level
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Employment status
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Employment status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Other: test
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          Other: test
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Current work industry
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Current work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add work industry
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Future work industry
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Future work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add work industry
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
   </div>
@@ -3136,624 +3007,572 @@ exports[`DemographicsSection should set user input correctly when user provides
     </a>
   </p>
   <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
+    id="demographics-fields"
   >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Gender identity
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Gender identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer to self describe: test
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          Prefer to self-describe: test
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Race/Ethnicity identity
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Race/Ethnicity identity
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            <button
+              className="btn btn-link p-0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              Add race/ethnicity identity
+            </button>
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add race/ethnicity identity
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Family income
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Family income
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add family income
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            U.S. Military status
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              U.S. Military status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add military status
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Your education level
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Your education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add education level
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Parents/Guardians education level
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Parents/Guardians education level
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add education level
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Employment status
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Employment status
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add employment status
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Current work industry
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Current work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add work industry
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
-  </div>
-  <div
-    className="pgn-transition-replace-group position-relative"
-    style={
-      Object {
-        "height": null,
-      }
-    }
-  >
     <div
+      className="pgn-transition-replace-group position-relative"
       style={
         Object {
-          "padding": ".1px 0",
+          "height": null,
         }
       }
     >
       <div
-        className="form-group"
+        style={
+          Object {
+            "padding": ".1px 0",
+          }
+        }
       >
         <div
-          className="d-flex align-items-start"
+          className="form-group"
         >
-          <h6
-            aria-level="3"
+          <div
+            className="d-flex align-items-start"
           >
-            Future work industry
-          </h6>
-          <button
-            className="btn ml-3 btn-link"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
-              data-icon="pencil-alt"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <h6
+              aria-level="3"
             >
-              <path
-                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
-                fill="currentColor"
+              Future work industry
+            </h6>
+            <button
+              className="btn ml-3 btn-link"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-pencil-alt fa-w-16 mr-1"
+                data-icon="pencil-alt"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
                 style={Object {}}
-              />
-            </svg>
-            Edit
-          </button>
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
+              Edit
+            </button>
+          </div>
+          <p>
+            Prefer not to respond
+          </p>
+          <p
+            className="small text-muted mt-n2"
+          />
         </div>
-        <p>
-          <button
-            className="btn btn-link p-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
-          >
-            Add work industry
-          </button>
-        </p>
-        <p
-          className="small text-muted mt-n2"
-        />
       </div>
     </div>
   </div>