Open
Description
The useBooleanShorthandSyntax
option (which is on by default), strips false
values.
While the behavior is fine for a true
value: <Foo bar={true}>
--> <Foo bar>
,
it's not for a false
value: <Foo bar={false}>
--> <Foo>
,
which is definitely not the same thing, the prop is removed completely.
Activity
armandabric commentedon May 18, 2022
Hi @pascalduez thanks for reporting this case.
I see your point, the actual behavior came from the class component: we could set a default value on the for the props. We use there default value to know if the falsy boolean props should be shown. In that case it works as expected.
Here the class component we use to test this behavior:
react-element-to-jsx-string/src/index.spec.js
Lines 22 to 29 in c9b7269
And the actual test:
react-element-to-jsx-string/src/index.spec.js
Lines 855 to 861 in c9b7269
That being said, in the actual react word we could said that most of the components are functional one. We could try to change this behavior to show
false
props if no default value are set. I will give a trypascalduez commentedon May 18, 2022
Hey @armandabric,
thanks for your reply.
I'm not sure to fully grasp, but this should be decorrelated from class vs functional components I guess.
You can set "default props" on functional components as well, and in two ways.
defaultProps
"static" propertyrmarquois commentedon Jan 24, 2024
I created a patch from @armandabric PR and it works.
Like @pascalduez said, I think library should handle the two ways to define defaultProps.
<Canvas>
> 'Show code' doesn't display props that havefalse
storybookjs/storybook#27127