How To Create Forms in React.Js

All You Need to Know to Create Forms in React

React.Js gives us full capability on using forms on our web page. Before diving in deep to this concept, there are a few prerequisites to learn before reading this lesson.

• States, or hooks. As React moves towards functional components, we will be using hooks in this post.
• Event handling.

By the end of this post, you will be fully apt to create an app that does the following function,

As you can notice, the values of the texts change dynamically depending on the user input. This allows for better visual display of the outputs.

Getting Started

Declaring Hooks

We will be using hooks to change our values according to user input. Here, we will be creating several hooks like so:

As these variable names suggest, name hook changes the name text field, fruit changes the fruit value of the drop-down menu, and so on and so forth.

Function to Change Hooks

Now let’s create a function to change the corresponding hooks. This function will be invoked whenever the value of an element is changed in the form. Note that this function is incomplete, for now, we are just fetching information about the triggered HTML element.

Write the code for the function changeValues() .

• Line 1 : Whenever an element is triggered, the event parameter contains the information about the element, for example, if the type is a checkbox, textfield, and so on.
• Line 2 : Get the name and the type of the triggered HTML element, and then assign them to their named variables respectively.
• line 3 : If the type of the element is a checkbox, then value should be a boolean indicating whether the checkbox is checked. If it’s not a checkbox, then value is the value of the HTML element.

Handling Inputs

Textfield

In this example, we will be changing the name hook.

To use a text field in your forms, write the following code:

• line 3 : Display the value of the name hook
• line 5 : Create a text field with its respective name. If at anytime the value of the field changes( onChange event), then invoke the changeValues function that we defined earlier, thus altering the value of the name hook.

To change the value of name , we now need to modify our changeValues function, like so:

• Line 4 : If the name(event.target.name) of the triggered HTML element is name , then we will change the value of the name hook. In return, this will re-render the component to display the value of name as defined above.

If you’re only concerned with the text field, this code is the final version:

Drop Down Menus

First create the drop-down menu within your form parent element, and then use a p tag to display the value of the hook associated with this drop-down menu. In my example, it will be the fruit hook.

This code says that whenever the input of the drop down method is changed ( onChange event), then invoke our changeValues function. This in turn changes the value of the fruit hook.

Now, we need to set a condition in our changeValues function. It will first check if the name of the element is fruit . If it is, then we will invoke the setFruit function.

• Line 4 : If the name(event.target.name) of the triggered HTML element is fruit, then we will change the value of the fruit hook. In return, this will re-render the component to display the value of fruit as defined above.

In the end, the code concerned to the drop down menu is shown below:

Radio Buttons

This is extremely similar to the drop down menu example. In this section, we will be using the gender hook.

As you can notice, according to line 7 and line 11 , whenever the input is changed, the changeValues function is invoked. If the hook value is the same as any of these radio button values, then the respective radio button is checked.

Now let’s alter the changeValue function to change the gender hook to its respective value

The code related to this HTML element is in this embed:

Checkbox

This input method has a bit of a learning curve. It has no value, but it has a single boolean property, whether it has been checked or not.

In this example, we will be displaying and changing an isFriendly hook with the checkbox

First, create a checkbox in your forms element, and a p element to display the isFriendly hook

Here, according to this code:

• Line 2 : Perform a check, if isFriendly hook equates to true , then display a yes , otherwise the code displays a no .
• Line 5 : Show a checkbox. Whenever the user input is changed( an onChange event is triggered), then invoke the changeValues function. This, in turn, will help us to change the isFriendly hook.

Now alter the changeValues function like so:

• Line 3 : If the type of the triggered element is a checkbox, then let value be the boolean value that determines whether the element is checked
• Line 4 : Pass this value to the setFriendly function so that the isFriendly hook is changed appropriately.

The final code for the checkbox and its associated hook is the following :

Recap

If you want all of the examples in one file, here is the embed:

Further Reading

• Introducing React Hooks
• React Handling
• Forms — React

Conclusion

This concept might have been a tricky one. My advice to you is to play with the code, destructure the programs and research if you are confused on any of the lines or functions for minimal confusion. Just don’t give up!

Next post : How To Build A Weather App In React Previous post : Class Based Components in React