Source:  Twitter logo
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

Try this instead:

comingsoon={value ? 1 : 0}
85 users liked answer #0dislike answer #085
Frank Lin profile pic
Frank Lin

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>
);
55 users liked answer #1dislike answer #155
Hansel profile pic
Hansel

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

23 users liked answer #2dislike answer #223
Anton Starcev profile pic
Anton Starcev

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.

10 users liked answer #3dislike answer #310
dansch profile pic
dansch

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}
7 users liked answer #4dislike answer #47
oskare profile pic
oskare

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

6 users liked answer #5dislike answer #56
Cubed Eye profile pic
Cubed Eye

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:

  1. Lift the styled component w/ the passed attribute up, so that the attribute is not applied to the element directly. Or,

  2. 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;

3 users liked answer #6dislike answer #63
Harley Lang profile pic
Harley Lang

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 } }
)});
1 users liked answer #7dislike answer #71
jmojico profile pic
jmojico

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.

0 users liked answer #8dislike answer #80
Arkadiusz Kałkus profile pic
Arkadiusz Kałkus

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).