React– category –

本記事では、ReactでコンソールログにvalidateDOMNesting(...): <x> cannot appear as a descendant of <x>.のエラーが出力された時の原因と対処法について解説しています。 原因と対処法 まずはこのエラーが出力される理由ですが、HTML5から導入さ...

本記事では、ReactでWarning: Use the `defaultValue` or `value` props on instead of setting `selected` on .のエラーが出力された時の原因と対処法について解説しています。 原因 HTMLでは<option>タグで選択状態のプルダウンを設定したい時に、...

本記事では、ReactでWarning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.のエラーが...

本記事では、ReactでコンソールログにWarning: Each child in a list should have a unique "key" prop.のエラーが表示された時の対処法について解説しています。 対処法 まず始めにエラーの対処法ですが、とても簡単でkey属性の値に一意のキーを指定する...

本記事では、Reactで選択されたラジオボタンのvalue属性の値を取得(判定)する方法についてサンプルコードを用いて解説しています。 サンプルコード 選択されたラジオボタンのvalue属性の値を取得するサンプルコードを用意しました。注目して欲しいポイント...

本記事では、Reactでクリックされた時に特定の処理を実行する方法について解説しています。 clickイベントの使い方 クリックされた時に特定の処理を実行したい時は、clickイベントを使用します。基本的な使い方は以下のとおりです。 function App() { // ②...

本記事では、Reactでinputに値や文字が入力できない時の原因と対処法について解説しています。 inputに入力が出来ない時の原因で考えられるのは、通常の変数に入力された値を代入させそれをvalue属性にセットしているケースです。下記のコードをご覧くださ...

本記事では、Reactでinputに入力された値をリアルタイムで取得する方法について解説しています。 サンプルコード 下記のコードは、テキストフォームに入力された値をリアルタイムで表示させるサンプルコードです。このサンプルコードを用いて解説していき...

本記事では、Reactで配列に代入されている複数の値を表示(展開)する方法について解説しています。 mapメソッドを使う 配列に代入されている複数の値を表示させるには、一般的にJavaScriptのmapメソッドを使用します。 mapメソッドについて簡単に説明すると...

本記事では、ReactのuseStateで配列を使う方法について解説しています。 useStateで配列を使う方法 useStateで配列を使用したサンプルコードを用意したので、これを利用して解説していきます。 コードの内容は、テキストフォームに値を入力しフォーカスを...