code review feedback

Author: KoolADE85

components/dash-core-components/src/utils/optionRendering.tsx

@@ -16,37 +16,43 @@ interface StylingProps {
     labelStyle?: React.CSSProperties;
 }
 
-interface OptionProps extends StylingProps {
-    index: number;
-    option: DetailedOption;
-    isSelected: boolean;
-    onChange: (option: DetailedOption) => void;
+interface OptionLabelProps extends DetailedOption {
+    index: string | number;
 }
 
-export function OptionLabel(
-    props: DetailedOption & {index: string | number}
-): JSX.Element {
+export const OptionLabel: React.FC<OptionLabelProps> = ({
+    index,
+    label,
+    title,
+    value,
+}) => {
     const ctx = window.dash_component_api.useDashContext();
     const ExternalWrapper = window.dash_component_api.ExternalWrapper;
 
-    if (typeof props.label === 'object') {
-        const labels =
-            props.label instanceof Array ? props.label : [props.label];
+    if (typeof label === 'object') {
+        const labels = label instanceof Array ? label : [label];
         return (
             <>
                 {labels.map((label, i) => (
                     <ExternalWrapper
                         key={i}
                         component={label}
-                        componentPath={[...ctx.componentPath, props.index, i]}
+                        componentPath={[...ctx.componentPath, index, i]}
                     />
                 ))}
             </>
         );
     }
 
-    const displayLabel = `${props.label ?? props.value}`;
-    return <span title={props.title}>{displayLabel}</span>;
+    const displayLabel = `${label ?? value}`;
+    return <span title={title}>{displayLabel}</span>;
+};
+
+interface OptionProps extends StylingProps {
+    index: number;
+    option: DetailedOption;
+    isSelected: boolean;
+    onChange: (option: DetailedOption) => void;
 }
 
 export const Option: React.FC<OptionProps> = ({

components/dash-core-components/src/utils/optionTypes.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import {DetailedOption, DropdownProps, OptionValue} from '../types';
 
-const isDropdownValue = (option: unknown): option is OptionValue => {
+const isOptionValue = (option: unknown): option is OptionValue => {
     return ['string', 'number', 'boolean'].includes(typeof option);
 };
 
@@ -17,11 +17,11 @@ export const sanitizeOptions = (
 
     if (options instanceof Array) {
         return options.map(option => {
-            return isDropdownValue(option)
+            return isOptionValue(option)
                 ? {label: String(option), value: option}
                 : option;
         });
     }
 
-    return options;
+    return [];
 };