React JSX Invalid ARIA attribute `ariaLabel`

Question

react jsx:

<button ariaLabel='label'>click</button>

rendered html:

<button arialabel="label">click</button>

console warning:

index.js:1 Warning: Invalid ARIA attribute `ariaLabel`. Did you mean `aria-label`?

ummm no, I meant ariaLabel since we always camelCase in jsx. Why is it all lowercase in the rendered html?

Answer 1

This seems to be an exception to the rule. Look at the documentation here -- Official React Docs

Note that all aria-* HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML: