Recursively render form in React. Demo: https://codesandbox.io/s/hackathon-jyswt0

recursive.js

// DEMO: https://codesandbox.io/s/hackathon-jyswt0

const FEATURES_LP_PD = {
  Skills: {
    'Show company data': 'cms.pages.skills.content.list.item.showCompanyData',
    'Search whole company': 'cms.pages.skills.skillsShare.isSearchingWholeCompany',
    'Knowledge Exchange': 'cms.pages.skills.hasSharedSkillsFeature',
    'Replace default logo': 'cms.pages.skills.buttonOptions.replaceDefaultLogo',
    'Logo change on hover': 'cms.pages.skills.buttonOptions.shouldLogoChangeOnHover',
  },
  Company: {
    Members: {
      'Skill profile page': 'cms.pages.company.members.content.list.item.skills.isSectionVisible',
      'Add/View organizations (restricted)':
        'cms.pages.company.members.content.list.item.addOrganizations.isSectionVisible',
      'Profile and PD': 'cms.pages.company.members.content.list.item.personalDevelopment.isEnabled',
      Capabilities:
        'cms.pages.company.members.content.list.item.assignedCapabilities.isSectionVisible',
      'Restricted view': 'cms.pages.company.members.content.list.item.isRestrictedSectionsView',
    },
    Capabilities: {
      'Contact email in capability': 'cms.pages.company.capabilities.hasContactEmailField',
      'Company opportunity trends': 'cms.pages.company.capabilities.hasCompanyOpportunityTrends', // not used?
      'Clone or merge capability': 'cms.pages.company.hasCopyAndMergeCapabilityFeature',
      }
    }
 };

const Form = React.memo(({ features = {}, isChild = false }) => {
  return (
    <>
      {Object.entries(features).map(([label, value]) => {
        const hasNoChildren = isChild && typeof value === 'string';

        if (hasNoChildren) {
          return <FastField label={label} key={label} name={value} as={CheckBox} />;
        }
        return (
          <Card key={label} variant="outlined" sx={{ m: 3 }}>
            <CardContent>
              <Typography variant="subtitle1" gutterBottom>
                {label}
              </Typography>
              {typeof value === 'object' ? <Form features={value} isChild /> : null}
            </CardContent>
          </Card>
        );
      })}
    </>
  );
});