0
2.1K
ViewsWarning: Received `false` for a non-boolean attribute. How do I pass a boolean for a custom boolean attribute?
Warning: Received `false` for a non-boolean attribute `comingsoon`.
If you want to write it to the DOM, pass a string instead:
comingsoon="false" or comingsoon={value.toString()}.
How do I pass a boolean in a custom attribute for React?
I'm using styled-components and passing the attribute through the component. Here is a picture of how I'm passing the attr.
·
Santiago Trujillo
3 answers
Answer question0
Try this instead:
comingsoon={value ? 1 : 0}
·
Santiago Trujillo
Report
0
As of 5.1 you can now use transient props ($) which prevents the props being passed to the DOM element.
const Comp = styled.div`
color: ${props =>
props.$draggable || 'black'};
`;
render(
<Comp $draggable="red" draggable="true">
Drag me!
</Comp>
);
·
Santiago Trujillo
Report
0
You have to add $ prefix to attribute:
$comingsoon={value}
Styled Components had added transient props in 5.1 version: https://styled-components.com/docs/api#transient-props
·
Santiago Trujillo
Report
Answer question