Styled-components "Warning Received `true` for non-boolean attribute"

In my opinion, the styled-components library has one particularly annoying warning:

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

The first time I ran into this, it took me a while to figure out what was actually going on. The warning is a bit counterintuitive, and the official docs don’t do much to help clear things up.

So, what does this error actually mean?

It means you passed a boolean value to a native DOM attribute that doesn’t expect one. To make it clearer: you passed something like true to an attribute on a built-in HTML element—an attribute that wasn’t designed to accept booleans.

For example, maybe you passed true to the alt attribute of a <p> tag. That’s not valid HTML.

This often happens when you define a styled component like this:

const Text = styled.p`
  color: ${(props) => (props.alt ? 'orange' : 'black')};
`;

const Foo = (props) => <Text alt={props.warning}>{props.children}</Text>;

To fix this warning, just rename the alt prop to something custom—anything that doesn’t clash with standard attributes of a <p> tag. That way, React won’t try to pass it down to the underlying DOM element, and the warning will disappear.