Bento: React warnings about incorrect DOM attributes / unrecognized props

Description

Invalid DOM property

When using a Bento component such as amp-base-carousel in React development mode, React will emit lots of console warnings about invalid DOM properties.

The reason for this is the difference between Preact and React in how they treat HTML attribute/property names.

Example: while Preact allows you to write <div class="foo" /> and <path stroke-width="1px" />, React requires <div className="foo" /> and <path strokeWidth="1px" />.

Solution: when creating the React version of a component, such props need to be renamed.

Unrecognized DOM property

The Arrow component in amp-base-carousel uses the outsetArrows prop to determine which class name to use and passes it down to the passed Comp component (defaulting to DefaultArrow).

Due to blindly passing this prop and using {...rest} in DefaultArrow, this prop ends up in the DOM, so React complains about it being unrecognized.

https://github.com/ampproject/amphtml/blob/4d6c9fae9127c16ac3133cd11eafa49edc6a727e/extensions/amp-base-carousel/1.0/arrow.js#L56

https://github.com/ampproject/amphtml/blob/4d6c9fae9127c16ac3133cd11eafa49edc6a727e/extensions/amp-base-carousel/1.0/arrow.js#L76

Solution: don’t leak these to the DOM

Receiving false for non-boolean attributes

React expects passing rtl="false" / rtl="true" instead of rtl={false} / rtl={true}, or simply rtl={rtl || undefined}. Otherwise you will get Received false for a non-boolean attribute warnings, as you can see in the log below.

Props @westonruter for initially reporting this at https://github.com/swissspidy/gutenberg-bento/issues/4

Reproduction Steps

1. Use the BaseCarousel React component in development mode
2. See lots of browser console warnings

Relevant Logs

* Warning: Invalid DOM property `stroke-width`. Did you mean `strokeWidth`?
* Warning: Invalid DOM property `stroke-linejoin`. Did you mean `strokeLinejoin`?
* Warning: Invalid DOM property `stroke-linecap`. Did you mean `strokeLinecap`?
* Warning: React does not recognize the `outsetArrows` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `outsetarrows` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
* Warning: Received `false` for a non-boolean attribute `rtl`. If you want to write it to the DOM, pass a string instead: `rtl="false"` or `rtl={value.toString()}`. If you used to conditionally omit it with `rtl={condition && value}`, pass `rtl={condition ? value : undefined}` instead.
* Warning: Invalid DOM property `class`. Did you mean `className`?
* Warning: Received `false` for a non-boolean attribute `group`. If you want to write it to the DOM, pass a string instead: `group="false"` or `group={value.toString()}`. If you used to conditionally omit it with `group={condition && value}`, pass `group={condition ? value : undefined}` instead.
* Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?

Browser(s) Affected

No response

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

2107240354000

[westonruter]

cc @caroqliu

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.