ReactでSPAを開発していたところ， Warning: Invalid DOM property 'for'. Did you mean 'htmlFor'?という警告が出力された．

エラー抜粋

---

index.js:1 Warning: Invalid DOM property `for`. Did you mean `htmlFor`?
    at label
    at div
    ...

原因と解決

---

Reactで開発する際に，ソースコードに以下のようなJSXを定義していた．

const nameEditor = createElement(
  'label',
  {for:'name'},
  'Name ',
  <input type="text" defaultValue={name} onChange={nameHandler} />
);

ここで，forが問題だったらしく，ReactにおいてはhtmlForとすると良いことが警告文からわかった．

つまり，以下のように変更すると，警告がなくなった．

const nameEditor = createElement(
  'label',
  {htmlFor:'name'},
  'Name ',
  <input type="text" defaultValue={name} onChange={nameHandler} />
);

理由は探ってはいないが，推測する限りだと，forが，JSの予約後とかぶってしまうためだと考えられる．（しかし，forとしても動作は正常に見えた）