Web Forms with React by Usman Abdur Rehman

I provided to calculate the value. After calculating the value, I will set a state, which I would display alongside the BMI label in the form footer as can be seen in Listing 4-8 . import { useState } from "react" import { useForm, SubmitHandler } from "react-hook-form" export default const BMI() { const [bmi, setBMI] = useState (); const onSubmit: SubmitHandler = (data) => { const { height, weight } = data; const bmi = (weight / height ** 2).toFixed(1); setBMI(bmi); }; return ( Listing 4-8 The form submission logic If you now enter a valid height and weight like 3 meters and 50 kilograms and click the Calculate button, you will see the BMI 5.6 being shown alongside the BMI: label like in Figure 4-2 . Screenshot of a BMI calculator interface showing two input fields with the numbers 3 and 50, a 'Calculate' button, and a result display indicating a BMI of 5.6. Figure 4-2 BMI value calculated from the BMI calculator And that is it. Just like that I was able to make a basic form using React Hook Form. Signup Form In this section, I will build a Signup form. This form would have the following salient features : A form with four fields, first name, last name, email, and password. The first name, email, and password fields would be required. The email field would have an email pattern validation so that it only allows valid email to be entered in the text field. The password field would have a minimum length validation of a