How to Fix " Received false for non-boolean attribute" Errors

How to fix common React errors
Ferenc Almasi β€’ 2022 July 25 β€’ πŸ“– 1 min read

The "Warning: Received false for a non-boolean attribute className." warning happens in React when you try to conditionally set a attribute, and the value of the attribute is evaluated to a boolean value when it should not be a boolean.

// ❌ This will throw the above error
<Component className={hidden && 'hidden'} />

// βœ”οΈ Use a ternary instead
<Component className={hidden ? 'hidden' : undefined}  />
Copied to clipboard!

This can most commonly happen if you mistakenly used a logical AND instead of using a ternary operator for an attribute. In the above case, if the hidden variable evaluates to true, it will work, as className will receive "hidden" as the value. But if it evaluates to false, then the prop will also receive a false value which is invalid for the className prop.

Instead, use a ternary operator and pass undefined to properly signal React that the prop should be left empty. You may also encounter this when using styled components, in which case, you can also do the following to ensure you pass the correct data type to your props:

<Component prop={value ? 1 : 0} />
Copied to clipboard!
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access exclusive interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Remove ads to learn without distractions
Become a Pro