Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
Warning: Received `false` for a non-boolean attribute. How do I pass a boolean for a custom boolean attribute?

Ask Question
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.
passing boolean custom attr as "comingsoon"
styled-components css props

                This accepted answer is not correct, please scroll down to transient-props. Reference: styled-components.com/docs/api#transient-props.
– Evgeny Bobkin
                Oct 16, 2021 at 19:27
                @EvgenyBobkin is correct, the right one is using transient-props. Please see the other answer
– Luane
                Dec 7, 2022 at 3:01
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>
                I come back to this question every two weeks or so as I run into this often, and I've even written an alternative below. But this has to be the best solution given that the DOM rejects boolean values.
– Harley Lang
                Jan 26, 2021 at 23:00
                I got the following error on the console. ``` Warning: Invalid attribute name: $datasuccess ```
– Derek Jin
                Nov 10, 2021 at 16:20
Similar to Frank Lins answer above but I had to use undefined instead of 0 to get rid of the warning:
comingsoon={value ? 1 : undefined}
                This passes the value to the DOM and with styled-components it's not really what you want though. Even though this is an easy way to remove the warning.
– Clanket
                May 21, 2019 at 11:47
                Using the same link, I found this solution (github.com/styled-components/styled-components/issues/…) even though some say it's not the best.
– Quentin
                Apr 10, 2020 at 14:22
This error with styled-components appears to be due to styled() attempting to apply a boolean to an element in the DOM, but DOM elements only accept strings as attributes.
This is well documented in the styled-components repository here: https://github.com/styled-components/styled-components/issues/1198
There are two solutions:
Lift the styled component w/ the passed attribute up, so that the attribute is not applied to the element directly. Or,
Filter the passed attribute out of the props when calling styled components.
Both of these options are demonstrated in the code below.
CodeSandbox: https://codesandbox.io/s/cool-thunder-9w132?file=/src/App.tsx
import React, { useState } from "react";
import styled from 'styled-components';
// demonstration of two different solutions for solving the styled-components error:
// `Warning: Received `false` for a non-boolean attribute`
// Solution 1: Lift the attribute up into a wrapper.
// Solution 2: Filter-out the `toggle` attribute passed to styled-component.
interface BtnProps {
  toggle: boolean;
const Container = styled.div`
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
const StyledBtnOne = styled.div<BtnProps>`
  & button {
    background-color: ${({toggle}) => toggle ? ' #2ecc71' : '' };
const StyledBtnTwo = styled(({primary, ...props}) =>
  <button {...(({toggle, ...propz}) => propz)(props)} />)<BtnProps>`
  background-color: ${({toggle}) => toggle ? ' #3498db' : '' };
const App = () => {
  const [ btnOne, setBtnOne ] = useState(false);
  const [ btnTwo, setBtnTwo ] = useState(false);
  const triggerOne = () => setBtnOne(!btnOne);
  const triggerTwo = () => setBtnTwo(!btnTwo);
  return (
    <Container>
      <StyledBtnOne toggle={btnOne}>
        <button 
          onClick={triggerOne}>
            Solution 1
        </button>
      </StyledBtnOne>
      <StyledBtnTwo 
        toggle={btnTwo}
        onClick={triggerTwo}>
        Solution 2
      </StyledBtnTwo>
    </Container>
export default App;
example below from the Link to answer
import styled from "styled-components";
import { Link } from "react-router";
const StyledLink = styled(Link)`
  color: ${({ inverted }) => (inverted ? "white" : "chartreuse")};
function Navbar() {
  return (
      {# Bad #}
      <StyledLink inverted={true}>Home</StyledLink>
      {# Good #}
      <StyledLink inverted={+true}>About</StyledLink>
                I can't edit this answer, but the link to the answer is broken. Here's the link it's supposed to be: maximeblanc.fr/blog/…
– lortimer
                Apr 27, 2022 at 14:11
Solved this by enclosing with brackets {} the boolean variable I was passing through props.
const childrenWithProps = React.Children.map(props.children, child => {
  return React.cloneElement(child, { showcard: { showCard } }
I got this issue and also shows React Hydration Error in my Next.js application. In my case it seems Styled component got a custom component and it can't process 'boolean'.
Here is my workaround:
before:
styled(Text)<{ center?: boolean}>
// Text is my custom component
after:
styled.div<{ center?: boolean}>
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.