reactでフォームから入力された値を使って計算を行い、結果を表示したい

Question

ご覧いただきありがとうございます。
reactで割り勘アプリを作成しています。

画面から入力された合計金額と人数から
一人当たりの支払額を計算、表示したいです。

import { createRoot } from 'react-dom/client'
import CalcButton from '../components/CalcButton'
import {Box} from  '@material-ui/core';
import {TextField} from '@material-ui/core';
import { useForm } from "react-hook-form"
import React, { useState } from 'react';

const HookTop = () => {

type FormData = {
	totalAmount : number;
	partySize : number;
} 

let result = 0;
    
  const { register, handleSubmit } = useForm()

  const onSubmit = (data) => {
    console.log(data)
    result = data.totalAmount / data.partySize
    console.log(result)
  }

    return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      class="bg-gray-300 w-screen h-screen flex flex-col items-center justify-center space-y-4"
    >
      <input placeholder="合計金額" {...register("totalAmount")} />
      <input placeholder="人数" {...register("partySize")} />
      <input type="submit" />
      <p>一人当たりの支払額 {result}円 </p>

    </form>

    )
}

export default HookTop

onSubmit内のconsole.log(result)では
一人当たりの支払額を計算できていることは確認できましたが
画面上では0円と表示されたままになってしまっています。

値を保存する、または表示するために足りない処理は何になるでしょうか？

Answer 1

result変数をuseStateで宣言してください。

Comments

[ttpk]

回答ありがとうございます。

let result = 0;
を
let [result, setResult] = useState(0);
に
result = data.totalAmount / data.partySize
を
result = setResult(data.totalAmount / data.partySize)
にそれぞれ変更したところ一人当たりの支払額を表示することができました

Answer 2

useStateを使って状態管理をすると可能です。
参考：https://ja.reactjs.org/docs/hooks-state.html

Comments

[ttpk]

回答ありがとうございます
let result = 0;
を
let [result, setResult] = useState(0);
に
result = data.totalAmount / data.partySize
を
result = setResult(data.totalAmount / data.partySize)
にそれぞれ変更したところ一人当たりの支払額を表示することができました