Reputation: 1659
My console is littered with random instances of the above error, but the behavior of the error seems unpredictable. From my understanding, I get this error because I have passed a boolean prop (like "small" or "green" or "primary" or something similar) down to styled-components, which passes it directly to the DOM item. However, if you look in styled-components own documentation (under Adapting Based on Props), you'll see that the exact scenario I'm talking about appears to be standard behavior. I should be able to say and then do something based on that prop defaulting to "true".
And sometimes my app seems to have no problem with this, while in other scenarios it flags it. This example is a perfect illustration.
From NumericInput.js
<DropdownArrowIcon small rotate />
Both props are implied boolean props, right? Now watch as I do exactly the same thing with each one:
DropdownArrowIcon.js
const DropdownArrowIcon = ({small, rotate, ...props}) => (
<Icon xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24"
small={small}
rotate={rotate}
>
<path d="M2 8l10 10 10-10z" />
</Icon>
);
const Icon = styled.svg`
width: ${props => props.small ? '13px' : '20px'};
height: ${props => props.small ? '13px' : '20px'};
text-align: center;
vertical-align: middle;
transform: ${props => props.rotate ? 'rotate(180deg)' : 'inherit'};
`
And yet in my console, I only get one error:
Warning: Received
true
for a non-boolean attributerotate
.If you want to write it to the DOM, pass a string instead: rotate="true" or rotate={value.toString()}.
My two primary questions here:
EDIT: Additional example:
<Button pink
buttonText="Save Changes"
buttonSize="small"
/>
Button.js
<SmallButton
variant="contained"
size="small"
onClick={handleClick}
pink={pink}
{...props}
>
{buttonText}
</SmallButton>
Upvotes: 1
Views: 1765
Reputation: 5650
What is causing React or styled-components to throw an error for "rotate" but not "small"?
rotate
is a valid attribute on svg
elements. styled-components is passing through this prop and React is validating these attributes.
From the styled-component docs:
If the styled target is a simple element (e.g. styled.div), styled-components passes through any known HTML attribute to the DOM. If it is a custom React component (e.g. styled(MyComponent)), styled-components passes through all props.
This explains why rotate
is passed (and validated) but small
is not.
If you don't want it passed, try renaming it to an attribute that is not a DOM attribute, eg: iconRotate
.
Upvotes: 2