Greeting to all the developers who are reading this. In this article, we are going to talk about forms in react js. In the previous post, by clicking on a certain button to display certain data on the DOM, we learned how to adjust the state.
Today, with a single click on the submit button, we will teach you how to create forms and use status to submit your form, so buckle up as we begin this post.
What you should do first is build a file using your terminal on your machine and cd it to that file. In our case, we have this file in our text, so first, we had to cd to it and then we used the same command to find the react file as you see below.
If you want to create a new react application you can use this command,
but if you just want to use an existing react application that you already working on you can simply open it up on your code editor by using this command:
This command will allow your react application to open up on your code editor so you can write more code.
For better practice, in your editor, you should create a new component and name it forms.js. After you do that you can go ahead and create your class component or functional component whichever you are comfortable with.
We chose class component here so if you would do the same make sure you have your constructor() and super() before we start writing the state.
Forms
Forms are fundamental to any web application and as developer, you need to be able to collect data for the users and save it to your back-end in your database.
After we got the basics covered we are going to have to use HTML to create our form and that should be based on how do you want your form to look like and also on how many inputs you want your form to have, in our case this is how we chose our form.
#1. Set initial state
This step is really important so pay close attention to this, as you can see in our form we are using name input, email input, and comment input. So that means in our state we are going to have three initial states.
- Make sure to set the initial state to an empty string (that basically will hold the data that user types).
#2. Change the value of the input tags
This could be the second important step that will have to always do when you create a form, basically what this going to do is save the data that the user types and associate it with our state.
- In our input tag let us set the value attribute to the current state that was an empty string.
#3. Add onChange events
Since we have three different inputs we are going to use onchange event for each one of them. That event will allow us to call back the function that we will create later and that function is going to be responsible for the action that the user does on the DOM.
- In each of our input tags, we have to add an onChange event.
#4. Add callback function
What we want to do here is for each input you have you are going to need to create a call back function. Inside of each function, we will setState in order to get the user information.
- Create a CallBack function, setState, and use the event to get the user’s input from the form you created.
After you follow the steps above you going to have what is called a controlled form and it is controlled by the state.
As you can see on our console every time a user types something the state changes on the right side of the image above to match the user’s input.
Now let us make things better and neater, we going to add p tags that display the input that the user uses.
This is a view of the entire component and in the GIF below you will see the actual view from the user perspective.
And this is my friend how you use state to create your form in react.
A couple of things I wanted to mention, if you are working with database and would like to submit your data to the backend there are other things you should consider.
- make sure you use onSubmit event on your form tag.
- Create a call back function that handles the data we have to send to the backend server. This callback function is where you run your API calls and send data to the backend server.
Now you will see how the data that we send to the backend would look like after we click on the submit button. Look at the right side of the image below and see how the data will be delivered to our backend as a state object.
- Inside of this callback function, you will need to use your Post request to send that object to the backend. There is a library called Axios, this library is really easy to use which we will cover some other time.
Note:
There is one thing that I forgot to mention is you do not need a separate callback function for each input tag you can literally use one callback function that sets the state for all of your inputs.
