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

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

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

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

本記事では、ReactのuseStateの基本的な使い方について解説しています。 【useStateの使い方】 下記のコードはuseStateを使って、ボタンをクリックすると1ずつインクリメントされた数値が表示されるプログラムです。 import { useState } from "react...

本記事では、Gitで「warning: LF will be replaced by CRLF in x. The file will have its original line endings in your working directory」のエラーが表示された時の原因と対処法について解説しています。 【原因と対処法】 まず始めにこのエラーが表...

本記事では、Reactのコメントアウトの書き方について解説しています。 ReactのJSX内でのコメントアウトの書き方は以下のとおりです。 {/* コメントアウト */} JSXの外であれば、通常のJavaScriptと同様に単一行のコメントアウトをする「//」、複数行のコメ...

本記事では、Reactで「Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?」のエラーが表示された際の原因と対処法について解説しています。 【原因と対処法】 まず始めにこのエラーが出る原...

本記事では、ReactのFragmentの使い方について解説しています。 【Fragmentの使い方】 Reactでは、returnでJSXを返す時に1つのまとまりで要素にまとめてあげる必要があります。もし、複数要素をreturnで返したい場合divタグをルート要素としてまとめる方法...

本記事では、JavaScriptでaddEventListenerメソッドのコールバック関数をfunctionからアロー関数に変更したらthisが使えなくなった時の原因と対処法について解説しています。 【原因と対処法】 まず始めにthisが使えなくなった原因は、アロー関数のthisが...