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
この記事にHiddenFieldというものがあったので

<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にセットしているのでしょうか？ソースコード上ではそれらしい箇所が見つからなかったのですが...
ご教授いただければ幸いです。よろしくお願い致します。

Comments

[jun68ykt]

Cannot read property 'toLowerCase' of undefined というエラーメッセージが表示されているので、 toLowerCase を使っているコンポーネントまたは他の何らかのソースコードもご質問に追記頂けると、解決につながる回答を得られ易いと思います。

[onakahetta]

ありがとうございます。
エラーメッセージを全て追記しました。

[jun68ykt]

エラーメッセージの追記ありがとうございました。お手数ですが、先にお願いしたように、あわせて、toLowerCaseを使っているコードを含むReactコンポーネントまたは他の何らかのJavaScript のソースコードも追記して頂けると、より原因の特定がしやすいです。 あるReactコンポーネントの何らかのメソッドの中で、toLowerCase　を使っているのであれば、できればそのコンポーネントのソース全体のコードを、回答者が確認できるとよいですが、長すぎる場合、そのメソッド（と、そのメソッドがコンストラクタやライフサイクルメソッドのいずれでもない場合は、そのメソッドを使っている箇所）のソースコードだけでもかまいません。見たいのは、エラーの起きている、toLowerCase　は何に対して、toLowerCaseしているのか、です。

[jun68ykt]

あるいは、 ご自身で書いたコードの中には、 toLowerCase を使っている箇所は無いということでしょうか？

[onakahetta]

ソースを見たところtoLowerCaseを直接的に使っている箇所はなく、質問にあるHiddenFieldを書くとエラーが出ます。例えばこのHiddenFieldをinputに書き換えるとエラーが出なくなります。
なので原因はここかなと思うのですが…　回答になっていなくて申し訳ないです。
ちなみにHiddenFieldは　import { HiddenField } from 'react-form'
でインポートできるかと思って書きましたがこれが間違いですかね？

Answer 1

こんにちは

質問への追記・修正の依頼へのコメントに返信する形で回答します。

ソースを見たところtoLowerCaseを直接的に使っている箇所はなく、

とのことですね。ひとつ気になった点は、ご質問に

react-formを使った複数の入力項目があるformがあり、

とあって、この react-formとは、https://www.npmjs.com/package/react-form のことだと思いましたが、

・・・この記事にHiddenFieldというものがあったので

との この記事 は、discord-react-forms という、別のモジュールの説明になっています。なので、react-form　によるフォームの中で、 discord-react-forms による HiddenField を使おうとしているのかなと思われて、
「それはうまくいかないのでは？」
という気がしました。

import { HiddenField } from 'react-form' でインポートできるかと思って書きましたがこれが間違いですかね？

はい。react-formのソースを見ても、HiddenField というコンポーネントをexport していないので、たぶんインポートできていないと思われます。

ちなみに、npmjs の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 として挙げられている２つのいずれかを利用することを検討するのもありかもしれません。

以上参考になれば幸いです。

Comments

[onakahetta]

ご回答ありがとうございます。
なるほど、HiddenFieldはreact-formのものではないのですね。
react-formをインポートしている他のform項目にTextareaやRadioGroupというものがあるのですが、貼っていただいたreact-formのソースにないということは、これもreact-formから使っているわけではないということでしょうか？
質問ばかりになってしまい申し訳ございませんが、ご教授お願い致します。

[jun68ykt]

はい。react-formのサンプル https://github.com/tannerlinsley/react-form#quick-start だったり、 react-formの提供する API https://github.com/tannerlinsley/react-form#api を見ても、react-form からimport できるのは useForm と useField の２点だけと思われますので、 import { Textarea } from 'react-form' だったり、 import { RadioGroup } from 'react-form' 　は import できないのではと思います。

[jun68ykt]

ちなみに、 discord-react-forms のほうは https://github.com/discordapp/discord-react-forms/tree/master/lib/components を見ると、 HiddenField 、 TextArea、 RadioGroup　が提供されているようです。

[onakahetta]

ソースのリンクとてもありがたいです...
確かにdiscord-react-formsの方を使ってそうな感じですね。
こちら見ながら自分でももう少し調べてみます。