reactjs – Why does JSX allow arbitrary HTML element attributes with hyphens, but not without hyphens?

This is intended behavior resulting from the design of React’s TypeScript type definitions (@types/react).

Solution #1

Recommended: Use data-* Attributes

If you are trying to attach custom data to an element, the HTML standard and best practice is to use data-* attributes.
Fix: Change b to data-b.

Solution #2

Use aria-* Attributes (If Applicable)

If your attribute relates to accessibility, use the appropriate standard aria-* attribute (e.g., aria-label, aria-describedby). These are known by TypeScript.
Fix: Use the correct ARIA attribute name.

Solution #3

Ignoring the Error:

// @ts-ignore