今回は、html5でテキストとコンテンツを隣接して表示したい時に使われるfor（予約語のほうではないです）のお話になります。
例えば、selectタグで項目を選択している時は、アプリを使用しているユーザーに今何を選択しているか認知させている必要があります。
〇〇年と表示したい時ですが、中で文字列として埋め込んで表示させることができます。しかし、選択した情報を値としてデータベース
などに送りたい時は、この状態で送信すると例：’2019年’のように選択した西暦全体が文字列としてみなされてしまうので、
データベース側としては都合が悪いです。
この現象の解決策の中には、forタグを使ってセレクトボックス外で‘年’を表示させる方法があります。
forタグは、主に<label>タグの開始タグと終了タグに挟まれた文書を、隣接したコンテンツに関連付けさせるオブジェクトです。
通常ならば下の例のように書いていけば、セレクトボックスと文字列が紐付けられた状態で表示されます。
</pre>
<select value={this.state.year || 1970} onChange={ e => this.setState({year: e.target.value}) } >
{ this.yearData.map( d => <option key={d.value} value={d.value}>{d.label}</option>)}</select>
<label htmlFor="select-01">年</label>
<pre>
このように、forを使えば簡単にコンテンツと文字列を関連付けられるのですが、reactだとこのforがアンノウンになってしまい
認識されないというエラーが起きてしまいました。下記がそのエラーになります。
Unknown property ‘for’ found, use ‘htmlFor’ instead
通常のhtmlでは何の問題もなく使用することができるのですが、reactなどのフレームワークの中では効いてくれないので、
単にreactの仕様なのかな・・・？と感じています。と思ったのですが、javascriptでは予約語のforを使用するので
これでは混同してしまうのでhtmlForをつかってくださいとのことでした。→ htmlFor versus for?
書いているうちにちゃんとした理由が見つかりました。どおりでjavascriptを用いたreactでは使えない訳ですね！
てな訳で、reactでforを使いたいよという方は、代わりにhtmlForを使ってください。
その他参考にさせていただいたサイト→Using the for attribute in JSX – linter unknown property “for”
