SWRで取得したdataを、React Hook Form（以降はRHF）のdefaultValuesにセットしたいことがあると思います。以下のような感じです。 しかし、このやり方だとdefaultValuesにうまくセ ...

React Hook Formのresetは「Formを空にする」という理解でいましたが勘違いしていました。 上記は、defaultValuesでhogeの初期値に「test」を設定しています。hogeの値を変更後、リセ ...

SWRで定期的に再検証する方法です。 refreshIntervalを使用すると実現できます。 上記の例では、5秒おき(5000ミリ秒)に再検証するようにしています。 refreshIntervalは0を指定すると自動再 ...

Controllerを使用せずにコンポーネントに対してReact Hook Formのregisterを渡したいことがあったのでメモ。

ReactとTailwindCSSでアニメーションを実装しようとして少し詰まったのでメモ。 「ボタンが押されたら1秒かけて文字の不透明度を0から1にする」というアニメーションは下記のようにすれば実現できます。 「サンプル ...

分割代入と残余引数を使えば、オブジェクトから「特定のプロパティ以外」を全て取り出すことができます。 上の例では、オブジェクトprofileからidを分割代入で取り出し、それ以外のプロパティは残余引数を使ってnewProf ...

やりたいこと ↑↑のようなオブジェクトがあった場合に、undefinedのプロパティを削除して↓↓のようなオブジェクトにしたい 解決策 こんな感じでできました！ 解説 Object.entriesでオブジェクトを配列に変 ...

useSWRを使用しているコンポーネントのテストコードをReact Testing Libraryで書く際に、useSWRをmock化する必要がありました。 下記のようにしてuseSWRをmock化できました。

React Testing LibraryでFormの入力値が正しいかテストする方法です。 toBeやtoHaveValueで値が取得できると思っていましたができなかったので備忘録です。 ※React Hook Form ...

React Testing LibraryでqueryByTextとgetByTextの違いがわかっていなかったのでメモ。 queryByTextの場合は対象の文字列がなかった場合はテストが失敗するだけですが、getBy ...

Alt + ↑↓ Altキー + 上下の矢印キー(方向キー)でカーソルの行を上下に移動できます。 Alt + Shift + ↑↓ Alt + Shift + 上下の矢印キー(方向キー)でカーソルの行をコピーできます。 ...

下記のようなSampleContextというContextと、SampleContextを使用しているSampleというコンポーネントがあるとします。 上記Sampleコンポーネントで「0です」と表示されるケースと「0以 ...

「関数やReactのコンポーネント名を変更したいけど色々な箇所で使用しているから変更が面倒」という場合はF2キーを使用すると一括で変更できて便利です。 例えば、「関数hogeをButtonコンポーネントで使用していて、関 ...

Next.jsでnext/navigationをインポートしているコンポーネントをReact Testing Libraryでテストを実行したらエラーになりました。 コンポーネント テストコード エラー内容 Jestはサ ...

Next.js13にJest、React Testing Libraryを導入する手順です。 Jest、React Testing Libraryのインストール 下記コマンドを実行してJestをインストールします。 Je ...

formタグにonKeyDownを追加し、Enterキーが押されたらevent.preventDefault()でsubmitをキャンセルしている。 eslintでonKeyDownのエラーが表示されたら// eslin ...

Recoilでstateをデフォルト値にリセットするにはuseResetRecoilStateを使用します。 Test.tsxでテキストを入力するとstateが更新されます。 その後、App.tsxで「stateをリセッ ...

Formで入力中に他のページに遷移したりタブを閉じたりしてページを離脱し、再度同じページを表示したときに入力途中だった内容を復元する方法です。Backlogとかであるやつですね。 onChangeでテキストボックスの値が ...

JavaScriptでオブジェクトの配列Aと配列Bがあり、「配列Bに存在する配列Aだけを抽出したい」ということがあったのでメモ。

react-dropzoneはローカルのファイルを選択したりドラッグ&ドロップするためのライブラリです。 インストール方法 最低限の使い方 もう少し実用的にしてみます コードの解説 maxSize：ドラッグ&am ...