どーも！
たかぽんです！
今回は先日Reactを触っていて出会ったエラーについてです！
Reactでtextareaを使っていたら出たエラー
先日HTMLのTextarea要素をReactで使用していたんですが...
以下のようなエラーが出てきました...!
Use the `defaultValue` or `value` props instead of setting children on <textarea>. in textarea実際に書いていたコードはこんな感じでした。
<textarea className="form-control" rows="1">hogehugahugo</textarea>一見問題ないように見えるかもしれません。
ただ、Reactでのtextareaでは上記例のように、"テキストエリアタグの間に初期値の文字を入れてはいけない"んです...!!!
では、初期値を使うならどうすればいいのか...?
そこはエラーに書かれている通りですね。
"defaultValue"もしくは、"value"という属性をつけてね〜！と言われています。
なので...
上記例のものを修正したい場合は以下のようにすればいいわけです。
// defaultValue
<textarea className="form-control" rows="1" defaultValue="hogehugahugo"></textarea>
// value
<textarea className="form-control" rows="1" value="hogehugahugo"></textarea>ちなみに...、普通のHTMLだとclassNameのところはclassなんですが、なぜclassNameになっているのは、ReactでJSXっというものを使用しているからです。
裏では上記のHTMLに見えるものは裏でJavascriptに変換されて、react.CreateElementされているからです。
そこで、Javascriptになるんですが、Javascriptではclassという名前は予約後として使えません。
そのため、代わりにclassNameとなっているわけですね！
（JSXでは他にも結構多くの属性の名前が変わってくるので要注意です！）
まとめ
さて、今回はReactで出会ったエラーについてでした！
最初は初期値の設定とchildrenという言葉がいまいち結び付かず、え〜？って感じだったんですが、htmlと全く同じと考えて決め込んでしまうと危ないですね...
是非参考になればと思います！
それでわ！