'React JSX Invalid ARIA attribute `ariaLabel`

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?

Solution 1:^[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:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	basti500

'React JSX Invalid ARIA attribute `ariaLabel`

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]