ipenguin67
ipenguin67

Reputation: 1659

"Received `true` for a non-boolean attribute" error only seems to happen sometimes with styled-components

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 attribute rotate.

If you want to write it to the DOM, pass a string instead: rotate="true" or rotate={value.toString()}.

My two primary questions here:

  1. What is causing React or styled-components to throw an error for "rotate" but not "small"?
  2. Why should any instance of this pattern of passing props throw an error, given that it is part of styled-components official documentation?

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

Answers (1)

skovy
skovy

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

Related Questions