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!
Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x