Always use the correct naming conventions for the platform you're working with, particularly React and HTML standards. React has specific prop naming requirements that differ from HTML attributes, and using incorrect names can cause functionality to break or behave unexpectedly.
Always use the correct naming conventions for the platform you’re working with, particularly React and HTML standards. React has specific prop naming requirements that differ from HTML attributes, and using incorrect names can cause functionality to break or behave unexpectedly.
Key examples:
readOnly
instead of readonly
for React propsclassName
, htmlFor
)readOnly
)Example from the codebase:
// ❌ Incorrect - invalid prop name
{props.readonly ? (
<ReadOnlyCheckboxInternal />
) : (
<CheckboxInternal />
)}
// ✅ Correct - follows React naming convention
{props.readOnly ? (
<ReadOnlyCheckboxInternal />
) : (
<CheckboxInternal />
)}
When in doubt, consult the official React documentation or MDN for the correct prop names and supported attributes for specific HTML elements.
Enter the URL of a public GitHub repository