Julien Deniau

Styled-component and HTML attribute warning

If you are using styled-component, you might have warning in the console:

Warning: Received true for a non-boolean attribute primary.

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

See the following example:

The styled-component FAQ solves this by using an adapter that destructured unwanted props.

It does work but adds a real complexity in your code.

Since styled-component 5.1, you can in fact use the transient props to fix this issue.

The only thing that you need is to change the prop primary to $primary (with a leading $), then the prop will not be passed down to the child component:

In practice, this helps me cleaning the following code:

- /* eslint-disable @typescript-eslint/no-unused-vars,  react/jsx-props-no-spreading */
- type CardProps = Parameters<typeof MpdCard>[0];
- const CleanedCard = ({
-   isSubscription,
-   ...rest
- }: CardProps & { isSubscription: boolean }) => <MpdCard {...rest} />;
- /* eslint-enable */
- const Card = styled(CleanedCard)<{ isSubscription: boolean }>`
+ const Card = styled(MpdCard)<{ $isSubscription: boolean }>`
 position: relative;
 display: flex;
 align-items: center;
 padding: 20px 25px;
 min-height: 82px;
 border-left: 5px solid
- ${(props) => (props.isSubscription ? $alertYellow : $defaultWhite)};
+ ${(props) => (props.$isSubscription ? $alertYellow : $defaultWhite)};

// …

- <Card isSubscription />

* <Card $isSubscription />

I opened a pull request to upgrade the FAQ on the subject.