Reactのformでhiddenの値をvaluesに追加したい

Question

お世話になっております。
ReactとReduxで書かれたWebアプリのコードに手を加える形で実装を行っています。

react-formを使った複数の入力項目があるformがあり、そちらにもう1つhiddenの項目を追加したいのですがうまくいきません。
他の項目はvaluesという変数？にまとめて入るようなのですが、こちらに追加されず困っています。
公式ドキュメントにもhiddenについての記載がないように見えました。

[https://discordapp.github.io/discord-react-forms/components/hidden-field.html](https://discordapp.github.io/discord-react-forms/components/hidden-field.html)
この記事にHiddenFieldというものがあったので
```React
<HiddenField value={hoge} name='hoge' />
```
こういう形で書いたのですが、下記のようなエラーになってしまいます。
```
Cannot read property 'toLowerCase' of undefined
TypeError: Cannot read property 'toLowerCase' of undefined
    at ReactDOMServerRenderer.renderDOM (/usr/src/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2776:28)
    at ReactDOMServerRenderer.render (/usr/src/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2755:23)
    at ReactDOMServerRenderer.read (/usr/src/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2722:19)
    at renderToString (/usr/src/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2980:25)
    at renderPage (/usr/src/app/node_modules/next/dist/server/render.js:174:26)
    at Function.getInitialProps (/usr/src/app/node_modules/next/dist/server/document.js:83:25)
    at Function._callee$ (/usr/src/app/pages/_document.js:6:25)
    at tryCatch (/usr/src/app/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:65:40)
    at Generator.invoke [as _invoke] (/usr/src/app/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:299:22)
    at Generator.prototype.(anonymous function) [as next] (/usr/src/app/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:117:21)
```
refを使う方法も試してみたのですが、いまいち理解できずこちらもエラーが起きてしまいました。

どこかでvaluesにセットしているのでしょうか？ソースコード上ではそれらしい箇所が見つからなかったのですが...
ご教授いただければ幸いです。よろしくお願い致します。

Answer

こんにちは

質問への追記・修正の依頼へのコメントに返信する形で回答します。

> ソースを見たところtoLowerCaseを直接的に使っている箇所はなく、

とのことですね。ひとつ気になった点は、ご質問に
> react-formを使った複数の入力項目があるformがあり、

とあって、この react-formとは、[https://www.npmjs.com/package/react-form](https://www.npmjs.com/package/react-form) のことだと思いましたが、

> ・・・この記事にHiddenFieldというものがあったので

との [この記事](https://discordapp.github.io/discord-react-forms/components/hidden-field.html) は、[discord-react-forms](https://www.npmjs.com/package/discord-react-forms)  という、別のモジュールの説明になっています。なので、react-form　によるフォームの中で、 discord-react-forms による HiddenField を使おうとしているのかなと思われて、
「それはうまくいかないのでは？」
という気がしました。

> `import { HiddenField } from 'react-form'` でインポートできるかと思って書きましたがこれが間違いですかね？

はい。[react-formのソース](https://github.com/tannerlinsley/react-form/blob/master/src/index.js)を見ても、`HiddenField` というコンポーネントをexport していないので、たぶんインポートできていないと思われます。

ちなみに、npmjs の[react-form](https://www.npmjs.com/package/react-form)の説明の冒頭に

> UNMAINTAINED
This library is no longer supported and has been deprecated in favor of the following libraries:
 
> ・React-Final-Form - 
A superior libary offering similar and/or better functionality that the original react-form.
 
> ・Informed - 
React-Form reimagined and rewritten from scratch by @joepuzzo, a previous maintainer of react-form

とあるので、`in favor of` として挙げられている２つのいずれかを利用することを検討するのもありかもしれません。

以上参考になれば幸いです。