勉強内容:useState2

気づいたら日付が変わってた٩( 'ω' )و
いっぱい書こうとすると挫折するので
今日も無理せず少なめです

import { useState } from 'react';
type NameType = {
  first: string;
  last: string;
};

const UseState2 = () => {
  const [name, setName] = useState<NameType>({ first: '', last: '' });
  return (
    <>
      <form>
        <input type='text' value={name.first} onChange={(e) => setName({ ...name, first: e.target.value })} />
        <input type='text' value={name.last} onChange={(e) => setName({ ...name, last: e.target.value })} />
      </form>
      <p>苗字:{name.first}</p>
      <p>名前:{name.last}</p>
    </>
  );
};

export default UseState2;

useState2

onChange→ 何か変更(文字を入力や消したり等)があった際に働く
{(e) => setName({ ...name, first: e.target.value })}
e→html のイベントハンドラー情報が返ってくる場所
...name→{ first: '', last: '' }を要素ごとに分解する。
分解しないとセットになっているため片方を変更するともう片方が消える
(値をコピーした新しいオブジェクトを生成して state に保存するの方が正しいかも。)
e.target.value→ イベントハンドラーの中の value をターゲットにする