React part 15

Jonathan Bleibdrey

7 min readAug 10, 2021

Today we talk about controlled inputs, forms and how to do a POST requests in our blog project!

OK, first things first, start up your JSON info like so:

npx JSON-server — watch data/data.json — port 8000

npm start or yarn start

Let's hop over to the create.Js it should look like this:

Nothing useful in there yet, now we need to add a “form tag” to add all the information needed for the new blogs to be added by the user.

I'm going to paste it here, Then explain after:

First you will notice that from lines 9–23, it is wraped by a form tag. (this is how all forms are started to get info from the user. look here for more info)

Next, it's standard to make a “label tag”( sometimes people skip this step and put a property of placeholder, which in turn allows you to skip the label step.), so the people know what they are filling out. We name ours plain and simple the “Blog title”.

We use a couple of different input fields in this form to practice different inputs. line 11 there is a basic “input tag” that also has a attribute named “type” with the value of “text” since that's what we are receiving. Also, a required attribute is added which is like a validation for front end, that says “This thing right here needs to be filled to submit this form”.

After that, we make another label with a “text-area tag”, “option tags”, and “select tag”.

Slap on a “button tag,”, and that's it check it out in browser:

Ugly as hell, I know! So I would recommend doing some CSS on it.

Check out CSS here!

This isn't a tutorial for CSS so i won't show you that portion of it.

Now that we do have all that, we have to collect the data from the user somehow once they input it. When we collect that data, we want to store it in some type of state, and we do this with hooks like so:

On line 4 we make a hook that will store the title data that the user inputs. We set useState to empty strings for its initial state.

Next, in our “input tag” on line 15, we add the value attribute, which takes in the title hook(this will show us whatever is in the hook state as we type it out.)

After that, we have onChange event! this is how we are able to change the input tag. We set up an anonymous function and set it to setTitle() function which takes in the event object which then we look through that object for the value attribute then sets it to our title hook.

Lastly, we need to show the user what that info is in the state, so we make an h1 and put the title hook in sqiggily brackets to output to the user for reassurment.

That's it for a simple input field and form layout. (I will show you the text area and select as well since its basically the same thing.):

The only thing different in this, is the selection we set the hook initial state with one of the names used in the “select tag” options, and that's it.

How to submit the form:

Now that we are tracking what a user is typing, we can move on to handling the form being submitting and do something with the data.

When a button is submitted in a form, it fires a submit event on that form, then it listens to it and reacts to it like so:

Lets go to the form tag, we add an onSubmit event, and pass in a function called handleSubmit(). We then make that function up on line 8, passing in the event to that function(it automatically gets passed in. from the onSubmit event), then we need to prevent the default of that button submit. ( why? because it refreshes the page if you don't have that e.prevent….etc information. Which clears your form and we don't want to do that.)

Now we need to make a Blog object, with that data getting passed in. When this does get submitted, so that we can pass it to our database or the backend. Just for testing reasons I'm going to “console.log” this to see what happens when we do submit this:

So if you look on the right, we do get that blog object with all our information we just filled out. This is great news since getting the data packaged up in a little box is one step loser to the finish line.

Post Requests:

OK, last part of this really long-form section, right now your create.js should look like this:

We’ll start off by deleteing the console.log() on line 12 in the handle submit function. We need to make a POST request which is basically saying we are sending data to whatever end point or URL. After that, we need a header setting, which basically saying we are sending JSON with this request. Last, we need the actual data, and we put that in the body option. But, we first have to turn it into a JSON string with the stringify method and then pass in blog variable like so:

since this is an asynchronous we can tack on a .then, which will fire a function when it is complete, for this we just use a console.log saying it all worked. If all works out, it should look like this:

in the console, you should see “new blog added”, and also if you go back to the homepage you should see the new blog on the homepage!

Extra Loading screen:

I swear last thing, I'm going to make a quick loading screen for the post request:

here down below, we are simply set up a new hook called isLoading and set the state to false.

When the submit is activated and is trying to make the post request, it turns to “true” we do this on line 12. After that, it turns to “false” once the promise is done on line 19.

Next, I basically made a button that when isLoading is false, it will show the add blog button as functional and if isLoading is true, then it gets disable so you cant click it a second time.

Wow, that was a lot I'm going to end it here and show you guys redirection tomorrow in another blog post. I hope you learned something and see you all next time.