ホーム

useState()でobjectの値だけ更新できるようにする

 

クレジットカードの情報アップデートすることを想定します。

 

クレジットカードの型情報

export type CreditCard = {
id: string
name: string
imgUrl: string
companyName: { value: string }
expirationMonth: string
expirationYear: string
holderName: string
number: string
}

 

useStateで初期値を入れる

const [card, setCard] = useState<CreditCard>({
id: '',
name: '',
imgUrl: '',
companyName: { value: '' },
expirationMonth: '',
expirationYear: '',
holderName: '',
number: ''
})

これでオブジェクトの一部を更新

<Grid item xs={12}>
<TextField
type="month"
variant="outlined"
fullWidth
onChange={e =>
setCard({
...card,
expirationMonth: e.target.value
})
}
label="有効期限"
/>
</Grid>

更新ボタンを押す

<Button
color="primary"
variant="contained"
fullWidth
onClick={async () => {
updateCard()
}}
>
更新する
</Button>

アップデートされたクレカの状態

const updateCard = () => {
console.log('アップデートされたカードの情報')
console.log(card)
}

ログ出力


expirationMonth: "2021-08" expirationYear: "" holderName: "" id: "" imgUrl: "" . . . 割愛
Pocket
LinkedIn にシェア

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-ホーム

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.