-
Notifications
You must be signed in to change notification settings - Fork 3.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bento: React warnings about incorrect DOM attributes / unrecognized props #35553
Comments
cc @caroqliu |
Possibly related to the |
|
Checking other react packages for non svg-related, |
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. |
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 inamp-base-carousel
uses theoutsetArrows
prop to determine which class name to use and passes it down to the passedComp
component (defaulting toDefaultArrow
).Due to blindly passing this prop and using
{...rest}
inDefaultArrow
, this prop ends up in the DOM, so React complains about it being unrecognized.amphtml/extensions/amp-base-carousel/1.0/arrow.js
Line 56 in 4d6c9fa
amphtml/extensions/amp-base-carousel/1.0/arrow.js
Line 76 in 4d6c9fa
Solution: don't leak these to the DOM
Receiving
false
for non-boolean attributesReact expects passing
rtl="false"
/rtl="true"
instead ofrtl={false}
/rtl={true}
, or simplyrtl={rtl || undefined}
. Otherwise you will getReceived false for a non-boolean attribute
warnings, as you can see in the log below.Props @westonruter for initially reporting this at swissspidy/gutenberg-bento#4
Reproduction Steps
BaseCarousel
React component in development modeRelevant Logs
Browser(s) Affected
No response
OS(s) Affected
No response
Device(s) Affected
No response
AMP Version Affected
2107240354000
The text was updated successfully, but these errors were encountered: