So, let's go to DevCamp Space and log in there because we're not gonna be populating our actual site yet, so I want to see it happen in real time to make sure the data's going up, so go to Portfolio and then go to Blogs and then you'll be able to see all of the blogs that you have and by the end of this, hopefully we're going to have a new record that is going to be there, so let's go and start building this.

Now, everything that we are going to do in this guide is going to be a review on what we did with the portfolio form, so let's get started on that. I'm gonna go to Visual Studio Code and the very first thing that I wanna do is to create a buildForm method.

Now, technically we could simply go in and create our handleSubmit with our call to axios and pass the data in but because we're gonna be dealing with images, we already know we're going to have to use a form object, so we might as well build that from scratch now.

So, I'm going to come and if you feel like it, definitely feel free to reference your portfolio form because we're gonna be following the exact same pattern here. I'm gonna create a method called buildForm and inside of it, I'm going to instantiate a new formData object.

Remember, a formData object is a basic JavaScript tool. It is a class in JavaScript that allows us to have key value pairs but also add a level of abstraction into the data that we're passing to an API.

If that's fuzzy do not worry, you can definitely go back and reference when we took a little bit of a deep dive into the formData object to be able to see exactly what it's doing. Just know that what we're doing is we are wrapping all of our data up in our React application, so it can be easily passed to the API.

So, I'm gonna say formData as the variable name and instantiate a new FormData object. Now, from here, we simply append to that object. So, I'm gonna say formData.append, so we're adding to this object that we just created and the syntax here, this is something specific to this application and to the API, it requires a portfolio_blog string and then in brackets the name of the attribute.

So this first one is going to be title and then from there, we pass in as a second argument, the value which is gonna be this.state.title, so just in case it's been a little while since you went through this and you created the last formData object and you did the buildForm for the portfolio, what we're doing here is we are adding our special form encoding and wrapping our data inside of it.

So we're saying that when we pass it to the API, the API is going to expect this type of key and that's how it performs its lookup, that's how it knows that the data we're passing in should go to the portfolio_blog database table and then we're specifically passing in data for the title, so you can think of this kind of like a mapping for the server that we're sending it to.

Once again, every API is gonna be a little bit different though, so you need to read up on the documentation for what the API expects.

So, I'm just gonna copy this and the next one is blog_status and then we're going to be passing in this.state.blog_status. Hit save and then the very last thing that you need to do is the buildForm method needs to return the formData object.

If you forget to do this part, then it will not work, so eventually we're going to be adding our content, and then also we'll be adding our image but for right now, we're just testing our most basic elements. So, that is our buildForm method.

blog-form.js

buildForm() {
  let formData = new FormData();

  formData.append("portfolio_blog[title]", this.state.title);
  formData.append("portfolio_blog[blog_status]", this.state.blog_status);

  return formData;
}

Now, inside of handleSubmit, this is where we're actually going to be calling that from. This is where we're going to contact axios and then we're gonna be sending all of our data up to the API. So, with that in mind, let's first import axios at the very top of the file.

So, import axios from axios

blog-form.js

import axios from 'axios';

and then inside of the handleSubmit at the very top of this method, I'm gonna give us a few lines and I'm gonna call axios.post because this is going to be a POST method. Remember, whenever we're wanting to create a new record in an API, then we use the POST method.

When we're wanting to retrieve a record, we use GET. So, I'm gonna say post and the URL for this is gonna be slightly different for you because it's going to include your sub domain but everything else will be the same, so I'll say https:// whatever your sub domain is, mine's jordan.devcamp.space/portfolio/portfolio_blogs.

Now, this is one where the very next argument is where we're passing in our data which in this case is our buildForm. So, after a comma, say this.buildForm and because it is a method, we want to call it, we want it to be executed. So, make sure you add parens at the end of it.

And then lastly, the third argument is to authorize ourselves because this is one where security's important. Sometimes when we're simply retrieving a record such as a blog record, we don't care about security in that case because we want those records to be open to the world. If someone wants to take your blog posts and put them on their page and give you that type of credit, that's a good thing, that's the reason why open source systems like GitHub have all kinds of completely free and open APIs where you can call them and you can pull in all this data.

One, it's a great way to practice working with APIs but also it's a way of being able to spread data around and be able to give it access to others but when we're creating a record, you have to be authenticated because you wouldn't want to allow someone else to create a record on your own blog, so with that, the third argument is going to be our withCredentials: true.

So this is where we're wrapping up the cookies on our local browser and those are being sent up to the server and then it performs a check to make sure that you are who you say you are and that you're allowed to create the record. So, inside of an object, simply say withCredentials: true and I know that was a long line of code. If I hit Save right here, it's gonna format it and then definitely feel free to pause the video if you haven't typed all of that out and then enter all of that in.

blog-form.js

handleSubmit(event) {
  axios.post(
    "https://jordan.devcamp.space/portfolio/portfolio-blogs",
    this.buildForm(),
    { withCredentials: true}
  );

  this.props.handleSuccessfullFormSubmission(this.state);
  event.preventDefault();
}

We have three arguments to the post method, we have the URL for the API, then a comma, then we have this.buildForm which is calling our new buildForm method and then lastly, we created an object where we said withCredentials: true.

Now, after that, I'm gonna get rid of the colon 'cause we need to tell axios what to do when that response comes back, so I'm gonna say then response and then pass in a function and for right now let's just console.log it but we're not gonna console.log in the handleSubmit, remember, that's exactly what our prop does.

So with our prop, what we're doing is we are taking the response and we're passing it up through this method, this handleSuccessfullFormSubmission method but now instead of this.state, now let's say response.data and then that'll give us some knowledge on exactly what's being accessed, what's being sent back to us.

Then from there, make sure you add a catch in case there are any server errors and we'll console.log this out with the handleSubmit, I'll say handleSubmit for blog error and print out the error.

blog-form.js

handleSubmit(event) {
  axios
    .post(
      "https://jordan.devcamp.space/portfolio/portfolio_blogs",
      this.buildForm(),
      { withCredentials: true }
    )
    .then(response => {
      this.props.handleSuccessfullFormSubmission(response.data);
    })
    .catch(error => {
      console.log("handleSubmit for blog error", error);
    });

Okay, that's quite a bit of code to write but let's test this out and see if it works or if we have any bugs that we need to fix. So, coming to Google Chrome, I'm going to refresh, open up the terminal. It looks like we don't have any errors yet and I'll open this up to the right-hand to make it a little easier to see.

Now, if I click Open Modal and you know what? Actually I need to open this on the bottom just so we can see everything. So, if I hit Open Modal and I'm just gonna say testing from modal. Make sure you put for blog status either draft or published all in lowercase.

Eventually we're gonna update this, so it will be a select dropdown but for right now just do it that way because the server is expecting one of those two options, so make sure you only use that and then from there, let's hit save and it looks like all of that worked.

So, we got blog from blog form as our response and this is coming from the parent and this is the portfolio_blog. We have an id of 22 and then a title and a blog_status. So, that looks like it worked but let's go to DevCamp Space, hit Refresh and there we go, at the very top we have an id of title of Testing from modal, and then a blog_status of draft.

Great job if you went through that, you now have your blog form wired up to the server and you can now create records. In the next guide, we're going to extend this functionality so that after this has been created, it is going to close the Modal automatically, and then it's going to populate our list of blog posts.

Resources

• Source code