useBooleanShorthandSyntax strip false values

[pascalduez]

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.

[armandabric]

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

	class DefaultPropsComponent extends React.Component {}
	DefaultPropsComponent.defaultProps = {
	test: 'test',
	boolean: true,
	number: 0,
	undefinedProp: undefined,
	};

And the actual test:

react-element-to-jsx-string/src/index.spec.js

Lines 855 to 861 in c9b7269

	it('should render boolean props if value is `false`, default is `true` and "showDefaultProps" is false', () => {
	expect(
	reactElementToJSXString(<DefaultPropsComponent boolean={false} />, {
	showDefaultProps: false,
	})
	).toEqual('<DefaultPropsComponent boolean={false} />');
	});

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 try

[pascalduez]

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.

• Wit the defaultProps "static" property
• With default parameters

[rmarquois]

I created a patch from @armandabric PR and it works.
Like @pascalduez said, I think library should handle the two ways to define defaultProps.