magazine off

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

投稿日 : 2021年6月29日(火曜日)

 

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

 

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

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: "" . . . 割愛

Categories

Recent Posts

RailsでJSONを返すシンプルなWebAPIを作ってみる

 備忘録です   Ruby on RailsでシンプルなJSON…

投稿日 : 2020年11月30日(月曜日)

スピードをとるか、それとも?

 衝撃的な本と出会いました。     …

投稿日 : 2018年3月21日(水曜日)

つながらない生活 「ネット世間」との距離のとり方

  [urlpreviewbox url="https://www.…

投稿日 : 2018年4月13日(金曜日)

herokuのdbを更新する – rails

  $ heroku run rake db:migrate ちなみに、パイプ…

投稿日 : 2018年11月19日(月曜日)