React part 15
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.
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.
React part 1 (How to start a react app)
React part 2 (components and dynamic values)
React part 3 (Multiple components and small styling)
React part 4 (click events with functions and react dev tools)
React part 5 (link to: useState hook and how to output lists in react)
React part 6 (Props and reusable components)
React part 7 (passing functions as props and use effect hook)
React part 8 (continue with useEffect hook, dependencies with useEffect, and setting up the JSON server to fetch)
React part 9 (Fetching data with JSON)
React part 10 (loading bar and fetch errors)
React part 12(React Router Dom, Exact, and Links)
React part 13 (Router Parameter and UseEffect cleanup/Kill a fetch call)
React part 14 (Reusing custom hooks)