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

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

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