はじめに 以前の記事でuseStateで配列を更新する際にmapを用いた例を記載していました。 useStateで配列を扱う備忘録 - おーみんブログ その方法でも問題なく動きはするのですが、filterを用いたほうがより分岐も少なく、可読性が上がりそうだったのでそちら…

はじめに ReactアプリをAzure Static Web Appsへデプロイし、GitHub ActionsでCI/CD管理を行う方法について備忘録として残します。 手順 簡潔ではありますが、以下に簡単な手順を記載します。 GitHubへのコードプッシュ 作成したReactアプリのソースコードを…

はじめに React + Rechartsで棒グラフを作成しているのですが、Tooltipタグで出力する凡例の文字変更にハマったので備忘録として残します。 デフォルトのTooltip ToolTipタグを用いると以下のようにグラフの凡例を表示することが出来ます。 とても便利なので…

はじめに React + Rechartsでグラフを作成している際、ResponsiveContainerタグ関連でハマったので備忘録として残します。 ResponsiveContainer ResponsiveContainerタグで囲むことで、囲まれたグラフ部分をレスポンシブ形式にすることができます。 公式説明…

はじめに Reactを用いて円グラフを書く機会があったので備忘録として記載します。 Recharts RechartsはReactベースのチャートライブラリです。 描画はSVG形式で行われます。 recharts.org 円グラフを実装してみる 以下のような円グラフを実装します。 公式の…

はじめに 基本的にuseStateで定義した変数の値を変更する際はsetStateを用いますが、値が変更されない事象がありました。 調べたところReactの仕様っぽかったので備忘録の粒度ではありますが記載したいと思います。 zenn.dev 内容 以下のようなコードの場合…

はじめに ReactのuseStateを用いて配列を操作する方法で少しハマったので備忘録として記載します。 push後にDispatchを用いて更新しても反映されない 最初以下のように実装していたのですが、再レンダリングがされず...。 // 値を定義 const [value, setValu…

はじめに React hooksの1つであるuseContextを用いる機会があったので備忘録として記載します。 useContextについて Reactでは通常データ共有の際にpropsを用いてコンポーネント間でデータのやり取りを行いますが、useContextを用いることでその制限がなくな…

はじめに カスタムフックを用いてHooksを複数用いている処理を別途切り離してみたので備忘録として残します。 カスタムフックとは 以下2つの記事がとても分かりやすかったです。 独自フックの作成 – React 【React】カスタムフックと本気で向き合ってみた - …

はじめに 親コンポーネントからモーダル表示フラグを継承した際に、子コンポーネントから親コンポーネントへのStateを更新する方法について備忘録として残します。 実装イメージ 以下のようにモーダルで表示し、更新ボタンをクリック後にモーダルが消えるよ…