Creating a Controlled Form Using React

So you are an aspiring software engineer who just began learning React and you come across your first form. Oh no you might be thinking but don’t worry we are going to go through the basic fundamentals of setting up a simple form that would allow you to make a post request to an array of objects allowing what you already have shown to display the newly created object as well. Like I said we are just going to be going over the basic form construction and using state to update and change information we want to pass through to the database. We will not be covering using CSS in the form or any styling elements but focusing on the principle operation of a controlled form.

First thing we are going to want to do is setup a new form page in the components as a file. For this demo we are going to be making a post request to an already existing array of dogs. (This is a made up array that we are going to be using. ) For our example the only information that a dog has is its name. So what we are going to want to do is create an input field and a useState that we can assign to the dogs name. When the information is passed through then we will know that the information went to the backend db. We are also going to be using a JSON server for our backend as well so just assume everything is going to be running on localhost:3000 or some similar web address. So let’s get started with seeing the database and from there we can move on to create the new form from scratch.

So as we can see from here we have a an array of dogs that we want to be able to add another dog to. So let us begin by using the React docs where we can get a basic skeleton with all of the information that we need for setting up a controlled from. After we have successfully navigated our React docs we can go ahead and place our code in the new form component we made called DogForm.js. From here we are able to copy and paste our skeleton in the form which should look like this.

Skeleton form from the React docs

once we have this we can start to input our information that we want to pass. The first step is to name the function in the form to an appropriate name. We will call ours NewDogForm. After we have properly renamed our function the next step I like to go to is setting up or useState so that we can accurately pass the information from the form to the database. Being descriptive in everything that we do is very important in what we do as it makes our code seem more like common tongue speaking. Remember when you setup state you are creating a variable and also a variable to change the initial value which is your setValue or set Variable. For this project we are going to name our state variable newDog and the set variable as setNewDog. We are going to set the initial state value as an empty string. This way when the keystrokes happen it will update dynamically and keep a nice clean and empty form for the users to start with. After we have our state setup we want to pass down our state value to the input field which is going to match our attribute. Once we have state setup in the input field the next step will be to setup our onChange function. This is the function that is going to be running the whole time in the input field. This function allows the user to be changing the state with every keystroke as it is made in the input field of the form. Once again i like to be very specific about my naming when I am creating anything. I decided to rename the function to handleNewDogName. This is a nice descriptive name that is identifying exactly what this function is going to be changing and which state. Inside of this function we are going to be passing in the input value from the field and allowing it to change the state variable value. At this point our skeleton form we started with is now looking like this.

Next up is to handle the onSubmit function of the form itself. When you write your onSubmit function I like to start on the line where the JSX is located and the form tag itself first shows up. This functions whole purpose is handle the post request and push the information to the database allowing you to manipulate the data as you see fit down the road. After we have the functions name its time to start to put in the data. If you ever made a post request in Javascript before the syntax is very similar. Again my app is based upon using a JSON server so i use the docs associated with JSON to get a skeleton template of a post request. I put that into my code and manipulate the data for my own use. First thing i do is i pass down the data i want to be posted to the web address. For this case all we have is a name and the information is stored under the state variable of newDogName. So i write in data {name: newDogName}. When your information is in your handleSubmit function should look something like this.

The trickiest part about this is if your list is already displaying on a page and you want your new information to show up without rendering you are going to need to use a call back function and pass that function down from the existing parent to its child component. For demo purposes we are going to say that you already got the list items from the array to show up and you already created an existing array called “dogs”. So we navigate up to the parent directory( the file where you imported the form to. It is because of right here we are able to use the props of the existing dog array and pass down information into the form component on the parent page. So in the parent page we want to create a new function that we are going to call “handleDogForm”. In this function here is where we want to be able to pass in the new dog information and have it get pushed into the existing dog array. When this is written it will look something like this.

Now that we have the info passed down as a prop the next thing we need to do is go into the child component and call down our prop into the DogForm function. After this is called down we are then going to be able to finish out our post request which will allow our new information to be pushed to the backend and to be displayed if you already had the list items of the array displaying to your page. Our final step should be now complete and if you pass in the information on your displaying form correctly you should be able to create a new dog. You finished post request should look like this right now.

Congrats you have a functioning form that is allowing you to persist information to the backend and manipulated your frontend to display your new object without reloading the page! Hopefully this is a helpful guide into the basics of creating a new form!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store