「実績で学ぶ古スタックＷｅｂ開発」勉強メモ

useStateとは、Reactにおける関数コンポーネント内で状態管理等を行う機能を利用するためのものであるフックの一つ。
useStateは状態管理を行う。

const [count, setCount] = useState(0);

上記における、countは状態変数を表し、setCountはその状態変数を更新するための関数

() => handleEditCancel(data.id)

イベントハンドラに引数を渡すためにアロー関数を使用する。
→ アロー関数を使わずに直接関数を渡すと、即座に実行されてしまう。

React.ChangeEvent<HTMLInputEvent>型
→ HTMLの入力要素に対する変更イベント

const { value, name } = event.target

イベントのターゲットは入力要素を表す。

const selectedProduct: ProductData = data.find((v) => v.id == id) as ProductData;

findメソッド→配列内の各要素に対してコールバック関数で、条件に一致するものを返す。
上記の場合、idが一致するものを返している。

export default function Page({ params }: { params : { id: number }, } ){

動的セグメントから検索に使うパラメータを取得する方法
Page関数に引数に追加する。オブジェクトとして渡したものをプロパティに変換している