New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Why are attribute names "class" and "for" discouraged? #4331

Open
callumlocke opened this Issue Jul 9, 2015 · 6 comments

Comments

Projects
None yet
7 participants
@callumlocke

callumlocke commented Jul 9, 2015

From the docs:

Note:
Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively.

But the JSX compiler seems to be smart enough to quote keys like "class" and "for" (so they'll work fine even in pre-ES5 environments). So what's the problem? Why are they discouraged, and what exactly does that mean?

@zpao

This comment has been minimized.

Member

zpao commented Jul 9, 2015

The wording there is a bit confusing but here's a short answer:

Our DOM components use (mostly) the JS API so we opted to use the JS properties (node.className, not node.class).

You're welcome to use class and for in your own components. Not all JSX compilers quote keys (eg react-tools) so just be aware of your own constraints and tool choices.

@zpao zpao closed this Jul 9, 2015

@jimfb

This comment has been minimized.

Contributor

jimfb commented Jul 9, 2015

If the docs are confusing, we should leave the issue open to fix them.

@jimfb jimfb reopened this Jul 9, 2015

@kevinSuttle

This comment has been minimized.

Contributor

kevinSuttle commented Jun 28, 2016

I thought the same about the type attribute.

@chicoxyzzy

This comment has been minimized.

Contributor

chicoxyzzy commented Jun 28, 2016

type is not reserved word in JS (but it is in TS and Flow)

You're welcome to use class and for in your own components. Not all JSX compilers quote keys (eg react-tools) so just be aware of your own constraints and tool choices.

Also those keys are hard to add typings to using TypeScript or Flow

@kevinSuttle

This comment has been minimized.

Contributor

kevinSuttle commented Jun 28, 2016

Right, but there are several type attributes in HTML, particularly in input and button elements.

@nhunzaker

This comment has been minimized.

Collaborator

nhunzaker commented Jul 12, 2017

I'd like to see support for direct use of class and for. There is overlap with #5926, and conversation has picked up again there, so I'll close this out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment