I developed a React component in Typescript for conditional text search, looking like this:
Storybook select knob works correctly:

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;
}
};
