JSX and the "for" attribute

1

I can’t recall where in the doc I read it, but you can’t type things like

<input type="range" id="points" name="points" min="0" max="10"></input>

because “type” gets seen as a ReScript keyword or something. So there’s a hack for this, and instead you write

<input type_="range" id="points" name="points" min="0" max="10"></input>

with an underscore after the type_.

Fine. I’ve done that. But if I want a label for some input, then (according to this) I should be typing

<label for="birthdaytime">Birthday (date and time):</label>
<input type_="datetime-local" id="birthdaytime" name="birthdaytime">

and that for attribute again gets mistaken for a keyword. And changing it to for_ doesn’t seem to work. I also, looking at a very long arg-list presented in an error message, tried replace for with itemID as the thing that sounded the most likely, but it failed.

Are labels just stupid and no one uses them, so no one encountered this for = problem, or did I miss something in the doc?

2

Nevermind; after searching for “<label” I came across this:

…so it’s htmlFor. Kinda feels to me as if it should have been for_, or type_ should have been htmlType, but…there was probably a good reason for this choice.

1 Like
3

I think the reason is that while “type” is a ReScript keyword that can’t be used as a ReScript identifier (and, by convention, this is solved by appending an _), “for” is a JavaScript keyword, which is replaced by “htmlFor” by the React conventions, not ReScript or ReScript React.

4

Aha! That does make some sense then. I thought it was just possible that for was a ReScript keyword that I’d avoided seeing/using. :slight_smile:

1 Like
5

Well, for is indeed also a ReScript keyword, but I think htmlFor is used because it’s already used like that in React