🎄 Get 50% off from our JavaScript course for the holidays! 🎄

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!
Share on
  • twitter
  • facebook
JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in less time.

Learn More

Recommended

🎉 Thank you for subscribing to our newsletter. x