Review Comments

src/OnboardingSPA/components/RadioControl/RadioControlSkeleton/index.js

@@ -1,20 +1,14 @@
 /**
  * Renders Skeletons for Radio Control.
  *
- * @param {number} data       The options to be renedered
+ * @param {number} options       The options to be renedered
  *
  */
-const RadioControlSkeleton = ({ data }) => {
-    const buildDummyRadioControls = () => {
-        const customItems = [];
+const RadioControlSkeleton = ({ options }) => {
 
-        for (let idx = 0; idx < data.length; idx++)
-            customItems.push(<div className="radio-control-skeleton-item" />);
-
-        return <div className="radio-control-skeleton">{customItems}</div>;
-    };
-
-    return buildDummyRadioControls();
+    return <div className="radio-control-skeleton">
+            {options.map((option) => (<div className="radio-control-skeleton-item" />))}
+        </div>;
 };
 
 export default RadioControlSkeleton;

src/OnboardingSPA/components/RadioControl/RadioControlState/index.js → src/OnboardingSPA/components/RadioControl/RadioControlStateHandler/index.js

@@ -4,18 +4,18 @@ import RadioControlSkeleton from '../RadioControlSkeleton';
 /**
  * A State Handler to manage Radio Control
  *
- * @param {number} data           The options to be renedered.
- * @param {string} children       The children to be rendered out.
- * @param {number} watch          The variable to be awaited for to be fetched.
+ * @param {number} options           The options to be renedered.
+ * @param {string} children          The children to be rendered out.
+ * @param {number} watch             The variable to be awaited for to be fetched.
  *
  */
-const RadioControlState = ({ data, watch, children }) => {
+const RadioControlStateHandler = ({ options, watch, children }) => {
     const [rerender, doRerender] = useState(0);
 
     useEffect(() => doRerender(1), [watch]);
 
     return !watch ? (
-        <RadioControlSkeleton data={data} />
+        <RadioControlSkeleton options={options} />
     ) : (
         <>
             {<div style={{ display: 'none' }}>{rerender}</div>}
@@ -24,4 +24,4 @@ const RadioControlState = ({ data, watch, children }) => {
     );
 };
 
-export default RadioControlState;
+export default RadioControlStateHandler;

src/OnboardingSPA/components/RadioControl/index.js

@@ -1,2 +1,2 @@
-export { default as RadioCtrlSkeleton } from './RadioControlSkeleton';
-export { default as RadioCtrlStateHandler } from './RadioControlState';
+export { default as RadioControlSkeleton } from './RadioControlSkeleton';
+export { default as RadioControlStateHandler } from './RadioControlStateHandler';

src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js

@@ -13,7 +13,7 @@ import { EcommerceStateHandler } from '../../../../components/StateHandlers';
 import { store as nfdOnboardingStore } from '../../../../store';
 import content from '../content.json';
 import { useWPSettings } from '../useWPSettings';
-import { RadioCtrlStateHandler } from '../../../../components/RadioControl';
+import { RadioControlStateHandler } from '../../../../components/RadioControl';
 
 function createReverseLookup(state) {
 	return (option) =>
@@ -103,9 +103,9 @@ const StepTax = () => {
 							question={__(content.question, 'wp-module-onboarding')}
 						/>
 					</div>
-					<RadioCtrlStateHandler
+					<RadioControlStateHandler
 						watch={ settings }
-						data={ content.stepTaxOptions }
+						options={ content.stepTaxOptions }
 					>
 						<RadioControl
 							className={
@@ -128,7 +128,7 @@ const StepTax = () => {
 							)}
 							onChange={( value ) => selectOption( value )}
 						/>
-					</RadioCtrlStateHandler>
+					</RadioControlStateHandler>
 					<button
 						className='nfd-nav-card-button nfd-card-button'
 						disabled={settings === null || tax?.option === undefined}

src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js

@@ -13,7 +13,7 @@ import { RadioControl } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { RadioCtrlStateHandler } from '../../../../components/RadioControl';
+import { RadioControlStateHandler } from '../../../../components/RadioControl';
 
 /**
  * Get Started: WordPress Experience Comfort Level.
@@ -81,9 +81,9 @@ const GetStartedExperience = () => {
 							question={ currentStep.subheading }
 						/>
 					</div>
-					<RadioCtrlStateHandler
+					<RadioControlStateHandler
 						watch={ wpComfortLevel }
-						data={ content.options }
+						options={ content.options }
 					>
 						<RadioControl
 							className={
@@ -106,7 +106,7 @@ const GetStartedExperience = () => {
 							)}
 							onChange={( value ) => setWpComfortLevel( value )}
 						/>
-					</RadioCtrlStateHandler>
+					</RadioControlStateHandler>
 					<NavCardButton
 						text={ __(
 							content.buttonText,