useState

こんにちは！ スマレジ テックファームのMichiです！ 前回の記事『Webエンジニアへ転職して1年が経ちました』で書いた通り、Q1（5月～7月）は「React/TypeScriptの習得」を目指します。 その第一段階として、5月はReactの基礎を固めていきます。教材はUdemyのこちらのコースを使用しています。 https://www.udemy.com/course/modern_javascipt_react_beginner/www.udemy.com https://www.udemy.com/course/react_stepup/www.udemy.com 今回は、React …

はじめに 以前の記事でuseStateで配列を更新する際にmapを用いた例を記載していました。 useStateで配列を扱う備忘録 - おーみんブログ その方法でも問題なく動きはするのですが、filterを用いたほうがより分岐も少なく、可読性が上がりそうだったのでそちらの処理を備忘録として残します。 サンプルコード スプレッド構文とfilter関数を用いて以下のような処理を書きます。 // 値を定義 const [value, setValue] = useState([]) // オブジェクト型の配列と仮定しています // filter関数で更新対象の配列を排除し、新たに値を挿入します。 s…

昨日の記事でMaterial-UIのTableを使ってオブジェクト配列を持つstate変数の値を表示しましたが 最初にsetState()でセットしたオブジェクトが表示されていませんでした components/DataTable.tsx useItem.tsxで取得したstate変数をDataTable.tsxで定義したstate変数にセットし直しています useEffectでログ出力を追加しました import {useState, useEffect} from 'react'; import Table from '@mui/material/Table'; import TableB…

昨日はuseStateを使って入力した名前を画面に表示するところまでできました 今日はstateをロジック処理に移動、入力コンポーネントと表示コンポーネントを分けます コンポーネント間でstate変数を共有する方法は何種類もありそうでしたが、カスタムフックを使います （useContextでグローバル変数的に共有する、親コンポーネントを経由して共有するがよく見かけましたが変数のスコープが広がりすぎて面倒なバグを生みそうなのでカスタムフックにしました） 失敗例：入力しても画面表示が切り替わらない logic/useName.tsx state変数「name」とnameを変更する「changeNa…