Forms In React

Handling forms in React involves managing state, handling user input, and validating the form before submission.

Contrary to some other ways of dealing with forms on the web, with React, forms are put into a state variable, and then React watches for any form-related event, with every such event updating the form’s state.

This means that React’s sort of constantly watching your form for any changes.

We are going to explore how to handle different input forms in react i.e

1. Text Inputs
2. Textarea
3. Checkbox
4. Radio Buttons
5. Select Dropdown

We are going to see how is handled and the state functions in react.
To handle forms in React, we are going to break down each step as follows:

-State Initialization
-Handling Input Changes
-Handling Form Submission
-Form Inputs
-Form Submission Button

Lets get into it real quick.

We are going to start with state initialization.

We are going to start by handling text inputs. We are going to use firstname, lastname and email as our examples and we go through how to implement them in react forms.

In the image shown above, we have created a useState that has a firstname, lastname and email inputs.These are text inputs that we are going to discuss as we go along. Let us see how our return statement looks like in our react form file.

The image above has the types, placeholders and names. This when the app is running, will only render input fields that does not handle any changes on the inputs added and nothing happens when the submit button is clicked.

Let us go through how we are going to handle change and how we are going to display the values.

To handle changes in the input fields and display the values when the form is submitted, we need to follow these steps:

1. Set up state management: We'll use state to track the values of the input fields.
2. Handle input changes: We'll create a function to update the state whenever an input field value changes.
3. Handle form submission: We'll create a function to handle the form submission, which will display the input values.

We have already created our state management as shown above.

Next, we'll create a function to handle changes to the input fields. This function will update the state with the new input values.

We have created a function named named handleChange using an arrow function syntax which can be called whenever an input field value changes.
event is an object representing the event that triggered the function (in this case, the change event of an input field).
We have used the event target, Lets go through what exactly happens or how we extract the name and the value.

const { name, value } = event.target; uses object destructuring to extract the name and value properties from event.target.
event.target refers to the HTML element that triggered the event, which is the input field in this case.
name corresponds to the name attribute of the input field, and value corresponds to its current value.

How do we continue and update the State:

1. setFormData({ ...formData, [name]: value }); is the line where the state is updated.

2. setFormData is a function provided by the useState hook to update the state (formData).

{ ...formData } uses the spread operator to create a new object that contains all the properties of the current formData object. This ensures that all existing form data are preserved.

This is an important step. Why ?

Because directly modifying the state object would break the immutability rule of React state, potentially causing unexpected behavior.

[name]: value dynamically sets the property of the new object. The square brackets
[name] is a computed property name in JavaScript.

This means that "set the property with the key equal to the value of the name variable to the value of the value variable".
For example, if name is "email" and value is "example@gmail.com", it effectively does: email: "example@gmail.com".

Combining the Two:(Using the spread operator as well as dynamic property name).

The final object looks like { ...formData, [name]: value }.

This creates a new state object with all the previous properties and updates the specific property (determined by the name attribute of the input field) with the new value.

Our form has been updated as well so as to be able to handle submit and for its components to have the required fields so that the data filled is submitted when the submit button is clicked.
Each of our input will have an input fild added 'handlechange' that will call the function mentioned above.
Our input field will each have:

onChange={handleChange}

How to Handle Form Submission

We'll create a function to handle the form submission. This function will prevent the default form submission behavior and display the input values.

This will display the data the user inputs in the field to our console.
We can perform any action after we have got the data from the form.

We have just handled text inputs, in our next tutorial, we shall cover Textarea and Checkbox in react forms.

In case of any question or need for clarification, feel free to reach out to me.

Feel free to follow me on Github.
Thanks

Happy coding !