Anyone knows the inner working of select knob in React Storybook's Knobs addon?

381 Views Asked by At

I developed a React component in Typescript for conditional text search, looking like this:

enter image description here

Storybook select knob works correctly: enter image description here

Storybook codes to make it happened:

<FilterComponentnt
                ...props
                accountNameTextCompareMethod={ConvertTextOptionItem(select('Account name search options', ['Starts with', 'Contains', 'Equals', 'Ends with'], 'Starts with'))}
                                    
                    />

Prop accountNameTextCompareMethod is of enum type:

export enum TextCompareMethod {
            StartsWith = 0,
            Contains = 1,
            EndsWith = 2,
            Equals = 3
        }

And the function ConvertTextOptionItem gets the string selected from the select Knob and convert it to enum TextCompareMethod; this works correctly as you saw in the picture 2

But when I used the component in the real app (in a container) and tried to set the same component prop accountNameTextCompareMethod via setting state:

const [accountNameCompareMethod, setAccountNameCompareMethod] = useState<TextCompareMethod>(props.accountNameTextCompareMethod ?? TextCompareMethod.StartsWith);

<FilterComponentnt
                ...props
                accountNameTextCompareMethod={accountNameCompareMethod} 
     ... />
                                    

Now it has no effect and the component's icon won't change as it was in storybook (picture 2).

My question is: How does the storybook Knob select work to set the same component prop successfully but my setting it from the real use of the same component (in a Redux form) does not? What did I do wrong and/or what the Storybook select knob did right?

Thanks for your time.

Update

const ConvertTextOptionItem = (item: string): TextCompareMethod => {
  switch (item.toLowerCase()) {
    case 'startswith':
    case 'starts with':
      return TextCompareMethod.StartsWith;
    case 'endswith':
    case 'ends with':
      return TextCompareMethod.EndsWith;
    case 'contains':
    case 'contain':
      return TextCompareMethod.Contains;
    case 'equals':
    case 'equal':
      return TextCompareMethod.Equals;
    default:
      return TextCompareMethod.StartsWith;
  }
};
0

There are 0 best solutions below