RMD029 — A boolean attribute given the string "false"
<input disabled="false" /> {/* reported — and the input IS disabled */}
<input disabled={false} /> {/* what was meant */}
A boolean attribute is true whenever it is present. The parser never reads its value, so the
string "false" turns the attribute on and the element does the opposite of what the line says:
| written | result |
|---|---|
disabled="false" | the control is disabled and cannot be used |
hidden="false" | the element is hidden |
readonly="false" | the field cannot be edited |
required="false" | the form will not submit without it |
checked="false" | the box is checked |
Pass the boolean itself — disabled={false}, or disabled={isLocked}. A false removes the
attribute, and that is what makes it off.
This is not fixed for you, on purpose. <input disabled="false"> is disabled in every browser,
by the HTML spec. A framework that quietly read the string and decided otherwise would make its JSX
mean something different from the markup it produces — the same page would behave one way rendered
by us and another way pasted into an HTML file.
Only the exact string "false", and only on a genuinely boolean attribute. aria-hidden="false"
is valid and means what it says: ARIA attributes are enumerated strings rather than boolean
attributes. data-open="false" is your own data. "no", "off" and "0" are not reported either —
they are probably mistakes, and probably is not enough to warn on.
Nothing in the type system catches this: JSX attributes are typed with an index signature, so any value compiles.
Next
- All diagnostics — every code the framework can report.
- Checking your app — the faults proved from the source, before anything runs.