Reputation: 1615

Warning: 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.

passing boolean custom attr as "comingsoon"

styled-components css props

Upvotes: 148

Answers (13)

Kolade Chris

Reputation: 195

In my case, I had a class name outside of the className attribute like this:

<Col className='text-center' py-3>
    <p>Techshop &copy; {currentYear}</p>
</Col>

And then I got the error like this:

If fixed the error by moving the py-3 class into the className quotes.

<Col className='text-center py-3'>
      <p>Techshop &copy; {currentYear}</p>
</Col>

Upvotes: 2

Ice K

Reputation: 151

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

Upvotes: 8

Nagibaba

Reputation: 5338

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

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

Upvotes: 0

Ace

Reputation: 455

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

Upvotes: 0

Arkadiusz Kałkus

Reputation: 18353

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.

Upvotes: 3

Hansel

Reputation: 1938

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

Upvotes: 140

julianm

Reputation: 2711

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

Upvotes: 2

Harley Lang

Reputation: 2333

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;

Upvotes: 8