Warning: Received `false` for a non-boolean attribute. How do I pass a boolean for a custom boolean attribute?

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

Unrelated, but which vs code theme are you using ? – sleepydrmike Aug 11 '23 at 14:19 — sleepydrmike, Aug 11 '23 at 14:19

Hansel · Answer 1 · 2021-09-08T15:33:06.560

112

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>
);

edited Sep 08 '21 at 15:33

answered Oct 01 '20 at 14:34

Hansel

1,568
1
15
29

5

I got the following error on the console. ``` Warning: Invalid attribute name: `$datasuccess` ``` – Derek Jin Nov 10 '21 at 16:20

score 108 · Accepted Answer · edited Jun 08 '18 at 01:44

108

Try this instead:

comingsoon={value ? 1 : 0}

edited Jun 08 '18 at 01:44

Stephen Rauch

47,830
31
106
135

answered Jun 08 '18 at 01:13

Frank Lin

1,160
1
7
4

29

This worked for me. Why does this work and not boolean? – GN. Jul 03 '20 at 18:19
20

This accepted answer is not correct, please scroll down to **transient-props**. Reference: https://styled-components.com/docs/api#transient-props. – Evgeny Bobkin Oct 16 '21 at 19:27
2

this is what works in my case: `resettable={condition ? true : undefined}` – itsjavi Jan 27 '22 at 16:06
2

@EvgenyBobkin is correct, the right one is using transient-props. Please see the other answer – Luane Dec 07 '22 at 03:01
1

typscript won't accept this :((((((((((((((( – Danish Feb 07 '23 at 13:46

score 41 · Answer 3 · answered Oct 14 '20 at 17:04

41

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

answered Oct 14 '20 at 17:04

Anton Starcev

1,138
12
9

score 15 · Answer 4 · answered Apr 10 '20 at 05:53

15

In my case, it was because I was accidentally passing {...@props} down into a div.

Usually passing attribute={false} is fine, but not to native elements.

answered Apr 10 '20 at 05:53

dansch

6,059
4
43
59

score 8 · Answer 5 · answered Apr 12 '18 at 00:37

8

Just make it a number instead, this is the workaround from https://github.com/styled-components/styled-components/issues/1198:

answered Apr 12 '18 at 00:37

Cubed Eye

5,581
4
48
64

1

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 '19 at 11:47
Using the same link, I found this solution (https://github.com/styled-components/styled-components/issues/1198#issuecomment-425650423) even though some say it's not the best. – Quentin Apr 10 '20 at 14:22

score 8 · Answer 6 · answered Aug 15 '19 at 13:44

8

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}

answered Aug 15 '19 at 13:44

oskare

1,061
13
24

score 6 · Answer 7 · answered Oct 24 '20 at 04:04

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;

score 3 · Answer 8 · answered Feb 13 '22 at 21:03

3

This warning can be caused also if the property of styled component has the name existing in HTML. For example I had such issue when named property wrap. After renaming warning disappeared.

answered Feb 13 '22 at 21:03

Arkadiusz Kałkus

17,101
19
69
108

score 2 · Answer 9 · edited Aug 17 '21 at 02:37

2

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 } }
)});

edited Aug 17 '21 at 02:37

Audwin Oyong

2,247
3
15
32

answered Apr 08 '21 at 07:08

julianm

2,393
1
23
24

score 2 · Answer 10 · answered Apr 04 '22 at 01:59

2

Add "+" before your booleans values.

comingsoon = {+creator.comingSoon}

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 (
    <nav>
      {# Bad #}
      <StyledLink inverted={true}>Home</StyledLink>

      {# Good #}
      <StyledLink inverted={+true}>About</StyledLink>
    </nav>
  );
}

answered Apr 04 '22 at 01:59

Ice K

31
2

I can't edit this answer, but the link to the answer is broken. Here's the link it's supposed to be: https://maximeblanc.fr/blog/how-to-fix-the-received-true-for-a-non-boolean-attribute-error – lortimer Apr 27 '22 at 14:11

score 0 · Answer 11 · answered Jun 17 '22 at 15:20

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}>

score 0 · Answer 12 · answered Mar 21 '23 at 07:29

0

use ...rest operator instead of passing props to the HTML.

 const Home = ({comingSoon, ...rest}) => <div {...rest}> content </div>

answered Mar 21 '23 at 07:29

Nagibaba

4,218
1
35
43

Warning: Received `false` for a non-boolean attribute. How do I pass a boolean for a custom boolean attribute?

12 Answers12

Linked