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

How to fix common React errors
Ferenc Almasi β€’ 2022 July 25 β€’ Read time 1 min read
  • twitter
  • facebook
React

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.

Copied to clipboard! Playground
// ❌ This will throw the above error
<Component className={hidden && 'hidden'} />

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

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:

Copied to clipboard!
<Component prop={value ? 1 : 0} />
  • twitter
  • facebook
React
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.