success to use map but this is just for he example

src/client/js/components/Admin/Customize/CustomizeFunctionSetting.jsx

@@ -15,25 +15,6 @@ import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 import CustomizeFunctionOption from './CustomizeFunctionOption';
 
-// const { adminCustomizeContainer } = this.props;
-// const dropdownGroupMapping = {
-//   S:  {
-//     pageLimitation: adminCustomizeContainer.state.pageLimitationS,
-//     switchPageListLimitationS: adminCustomizeContainer.switchPageListLimitationS,
-//   },
-//   M:  {
-//     pageLimitation: adminCustomizeContainer.state.pageLimitationM,
-//     switchPageListLimitationS: adminCustomizeContainer.switchPageListLimitationM,
-//   },
-//   L: {
-//     pageLimitation: adminCustomizeContainer.state.pageLimitationL,
-//     switchPageListLimitationS: adminCustomizeContainer.switchPageListLimitationL,
-//   },
-//   XL: {
-//     pageLimitation: adminCustomizeContainer.state.pageLimitationXL,
-//     switchPageListLimitationS: adminCustomizeContainer.switchPageListLimitation,
-//   },
-// };
 
 // dropdownOpenGroup, pageLimitationGroup, switchPageListLimitationGrpup
 // isDropdownOpenS, pageLimitationS, switchPageListLimitationS
@@ -61,40 +42,90 @@ class CustomizeFunctionSetting extends React.Component {
   }
 
 
-  renderDropButtons() {
-    const { t, adminCustomizeContainer } = this.props;
-    return (
-      <div className="form-group row">
-        <div className="offset-md-3 col-md-6 text-left">
-          <div className="my-0 w-100">
-            <label>{t('admin:customize_setting.function_options.list_num_s')}</label>
-          </div>
-          <UncontrolledDropdown>
-            <DropdownToggle className="text-right col-6" caret>
-              <span className="float-left">{adminCustomizeContainer.state.pageLimitationS}</span>
-            </DropdownToggle>
-            <DropdownMenu className="dropdown-menu" role="menu">
-              <DropdownItem key={10} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationS(10) }}>
-                <a role="menuitem">10</a>
-              </DropdownItem>
-              <DropdownItem key={30} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationS(30) }}>
-                <a role="menuitem">30</a>
-              </DropdownItem>
-              <DropdownItem key={50} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationS(50) }}>
-                <a role="menuitem">50</a>
-              </DropdownItem>
-            </DropdownMenu>
-          </UncontrolledDropdown>
-          <p className="form-text text-muted">
-            {t('admin:customize_setting.function_options.list_num_desc_s')}
-          </p>
-        </div>
-      </div>
-    );
-  }
+  // renderDropButtons() {
+  //   // const { adminCustomizeContainer, t } = this.props;
+  //   console.log('hi');
+
+  //   const dropdownGroupMapping = {
+  //     S:  {
+  //       label: 'admin:customize_setting.function_options.list_num_s',
+  //       // pageLimitation: adminCustomizeContainer.state.pageLimitationS,
+  //       // switchPageListLimitationS: adminCustomizeContainer.switchPageListLimitationS,
+  //       desc: 'admin:customize_setting.function_options.list_num_desc_s',
+  //     },
+  //     M:  {
+  //       label: 'admin:customize_setting.function_options.list_num_m',
+  //       // pageLimitation: adminCustomizeContainer.state.pageLimitationM,
+  //       // switchPageListLimitationS: adminCustomizeContainer.switchPageListLimitationM,
+  //       desc: 'admin:customize_setting.function_options.list_num_desc_m',
+  //     },
+  //     L: {
+  //       label: 'admin:customize_setting.function_options.list_num_l',
+  //       // pageLimitation: adminCustomizeContainer.state.pageLimitationL,
+  //       // switchPageListLimitationS: adminCustomizeContainer.switchPageListLimitationL,
+  //       desc: 'admin:customize_setting.function_options.list_num_desc_l',
+  //     },
+  //     XL: {
+  //       label: 'admin:customize_setting.function_options.list_num_xl',
+  //       // pageLimitation: adminCustomizeContainer.state.pageLimitationXL,
+  //       // switchPageListLimitationS: adminCustomizeContainer.switchPageListLimitation,
+  //       desc: 'admin:customize_setting.function_options.list_num_desc_xl',
+  //     },
+  //   };
+  // console.log('foo');
+
+
+  // Object.entries(dropdownGroupMapping).map(([key, value]) => {
+  //   return (
+  //     <div className="form-group row">
+  //       <div className="offset-md-3 col-md-6 text-left">
+  //         <div className="my-0 w-100">
+  //           {/* <label>{t(value.label)}</label> */}
+  //         </div>
+  //         <UncontrolledDropdown>
+  //           <DropdownToggle className="text-right col-6" caret>
+  //             <span className="float-left">{adminCustomizeContainer.state.pageLimitationS}</span>
+  //           </DropdownToggle>
+  //           <DropdownMenu className="dropdown-menu" role="menu">
+  //             <DropdownItem key={10} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationS(10) }}>
+  //               <a role="menuitem">10</a>
+  //             </DropdownItem>
+  //             <DropdownItem key={30} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationS(30) }}>
+  //               <a role="menuitem">30</a>
+  //             </DropdownItem>
+  //             <DropdownItem key={50} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationS(50) }}>
+  //               <a role="menuitem">50</a>
+  //             </DropdownItem>
+  //           </DropdownMenu>
+  //         </UncontrolledDropdown>
+  //         <p className="form-text text-muted">
+  //           {/* {t(value.desc)} */}
+  //         </p>
+  //       </div>
+  //     </div>
+  //   );
+  // });
+
+  //   console.log('fuga');
+
+  // }
 
   render() {
     const { t, adminCustomizeContainer } = this.props;
+    const hello = {
+      S:  {
+        label: 'hello',
+        desc: 'World',
+      },
+      M:  {
+        label: 'k',
+        desc: 't',
+      },
+      L:  {
+        label: 'u',
+        desc: 'k',
+      },
+    };
 
     return (
       <React.Fragment>
@@ -138,10 +169,20 @@ class CustomizeFunctionSetting extends React.Component {
               </div>
             </div>
 
-            { this.renderDropButtons() }
+
+            {/* { this.renderDropButtons() } */}
+
+            {Object.entries(hello).map(([key, value]) => {
+              return (
+                <div>
+                  {value.label}
+                  {value.desc}
+                </div>
+              );
+            })}
 
             {/* S: Modal */}
-            <div className="form-group row">
+            {/* <div className="form-group row">
               <div className="offset-md-3 col-md-6 text-left">
                 <div className="my-0 w-100">
                   <label>{t('admin:customize_setting.function_options.list_num_s')}</label>
@@ -166,10 +207,10 @@ class CustomizeFunctionSetting extends React.Component {
                   {t('admin:customize_setting.function_options.list_num_desc_s')}
                 </p>
               </div>
-            </div>
+            </div> */}
 
             {/* M: User Page */}
-            <div className="form-group row">
+            {/* <div className="form-group row">
               <div className="offset-md-3 col-md-6 text-left">
                 <div className="my-0 w-100">
                   <label>{t('admin:customize_setting.function_options.list_num_m')}</label>
@@ -194,10 +235,10 @@ class CustomizeFunctionSetting extends React.Component {
                   {t('admin:customize_setting.function_options.list_num_desc_m')}
                 </p>
               </div>
-            </div>
+            </div> */}
 
             {/* L: Search / Draft Pages */}
-            <div className="form-group row">
+            {/* <div className="form-group row">
               <div className="offset-md-3 col-md-6 text-left">
                 <div className="my-0 w-100">
                   <label>{t('admin:customize_setting.function_options.list_num_l')}</label>
@@ -222,10 +263,10 @@ class CustomizeFunctionSetting extends React.Component {
                   {t('admin:customize_setting.function_options.list_num_desc_l')}
                 </p>
               </div>
-            </div>
+            </div> */}
 
             {/* XL: NotFound / Trash Pages */}
-            <div className="form-group row">
+            {/* <div className="form-group row">
               <div className="offset-md-3 col-md-6 text-left">
                 <div className="my-0 w-100">
                   <label>{t('admin:customize_setting.function_options.list_num_xl')}</label>
@@ -250,7 +291,7 @@ class CustomizeFunctionSetting extends React.Component {
                   {t('admin:customize_setting.function_options.list_num_desc_xl')}
                 </p>
               </div>
-            </div>
+            </div> */}
 
             <div className="form-group row">
               <div className="offset-md-3 col-md-6 text-left">