As you may have noticed, I have switched up the film studio a little bit so that I can kinda mimic what it would be like if I was right in front of you in class and I could walk you through and live code through this entire build and give you some in-person explanation.

So that's why we switched up the studio, we are always trying to give you the very best chance and all the opportunity in order to succeed. So with that being said, let's get into the code.

We have right here our blog and now that we have our button here and we're using the correct authorizations, if I open this up, if you remember from the last guide, the issue that we currently have is if I click in the rich text editor, and I start typing, nothing is happening. And this is because we need to be able to start to update the state.

Now I originally filmed this episode, I filmed the episode where we could update the state for our rich text editor and the video was over 30 minutes long and I don't wanna do that to you so I reverted all the changes and I'm going to break that entire process down into smaller lessons.

The reason why it took so long to go through was because there is quite a bit to explain because there's quite a bit of functionality that's happening behind the scenes and I wanna make sure that I'm telling you exactly what's going on so that you understand it but I also don't want to stress you out with a plus minute video that covers a wide range of topics.

So I'm breaking it up and this first video, we are simply going to focus on how the blogForm needs to be set up. Now usually my goal with all of these lessons is to have some feature that is actually functional by the end of the video and we can't really do that here because there are too many steps that have to take place in order to get that working.

So right now what I'm gonna is I'm gonna open up the Visual Studio Code editor and open up the blog form. And we're gonna walk through what needs to take place here and we've already built all of this functionality in previous components so this will be a little bit of review for you.

The very first thing we need to do is our blog form needs the ability to hold content. So we need to add a piece of content to our state. So I'm gonna come at the end of blog_status and simply add a new key here in our state with content that will be an empty string. Now from that point, we need to have a function, we need to have a function that we can pass as a prop to the rich text editor and this is gonna be the main focus of this guide.

blog-form.js

this.state = {
  title: "",
  blog_status: "",
  content: ""
};

Not specifically how much code needs to be written because the code we're gonna write is actually pretty minimal but understanding why it's written this way is very important. So I'm gonna come down here and before we actually write it out, let's just bind it to this, though I will say this dot, and let's call this function handleRichTextEditorChange and we'll bind it to this. So this.handleRichTextEditorChange.bind and we'll pass in this and now let's create this function.

So handleRichTextEditorChange is going to take in an argument. And you may have guessed that that argument is going to be the content. Now, this is the most critical part of this entire guide and it's also very critical when it comes to building out these types of components is how this is gonna be set up.

It's not gonna make perfect sense 'til we go through the next few lessons but I do want you to remember, I don't want you to gloss over this fact that the content that we're passing in here is going to be a string value. And just remember that because we're going to have to understand that for later on and it's going to show you the right way to structure these types of components.

So we're gonna take in content and all we're going to do here is we're gonna call this .setState and I'm gonna show you a slightly different way to setState here and so I can say this.setState and now you may be used to the same process we've used up to this point where I would say something like I wanna set the content and then I wanna pass in content.

blog-form.js

  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
  this.handleRichTextEditorChange = handleRichTextEditorChange.bind(this);
}

handleRichTextEditorChange(content) {
  this.setState({
    content: content
  })
}

Now if you've ever seen this syntax where you have a variable such as an argument, and it's getting past into setState or to any object actually, and you have a key that is the same exact name as the variable, this is such a common pattern in JavaScript that the more modern versions of JavaScript allow you to combine these.

So I can say this.setState and then say content, I don't have to say the content key or anything like that and I can put it all on one line just like this. So the reason why I wanted to show you this was one, so that you have a cleaner, more modern syntax for whenever this situation occurs.

blog-form.js

handleRichTextEditorChange(content) {
  this.setState({ content });
}

The other is because you may be going through tutorials or reading documentation and you might see this syntax and it can be really confusing, you might say where is the key and which one is the value? So I wanted it to be clear that what we have going on here with line 24 is completely identical to if I said this.setState and I wanted to set the content key equal to content, which is the pattern we've followed for this entire course.

These two things are exactly the same so I'm going to use this other syntax here so that you always have a reference point for both of those. So now that we have that, the next step is we need to make sure that our form is capturing the new data.

So inside of our buildForm method, I'm just simply going to copy this append statement and then update blog, and instead of it saying blog status, I'm going to tell the API we're passing in content and then the actual data itself is gonna be this.state.content and that's all we need to do for our buildForm method.

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

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

  return formData;
}

And lastly coming all the way down, I'm not gonna worry about this.setState and resetting this yet, we're gonna worry about that later. And then coming all the way down into our RichTextEditor, now we need to pass our function as a prop so I'm gonna say handleRichTextEditorChange equals this.handleRichTextEditorChange and now our rich text editor is going to be able to have access to this function as a prop.

<div className="one-column">
  <RichTextEditor
    handleRichtexteditorChange={handleRichtexteditorChange}
  />
</div>

The main item that I really want to reiterate here is this handleRichTextEditorChange and the fact that this does not do a lot, it does not handle any kind of behavior, it does know that it is even working with data from a rich text editor, and that is the most important part about this lesson is that... imagine that you have a scenario where instead of using draft.js like we're using, imagine that you are being asked to switch the rich text editor.

As you're about to see in the next few lessons, the draft.js has quite a bit of specialized behavior. We aren't just working with string data, we're working with these special types of objects that have all kinds of other metadata and processes and functions associated with them.

If we were to tie those in and I'm gonna explain in the next few guides that you could tie these into these processes, handleRichTextEditorChange where you could run those kinds of processes like working with HTML and those kinds of things. If we type that into this function, what would happen is that if we ever needed to make a change, if we ever switched out draft.js for another library, which is a common pattern, you might have to do that at some point.

If you did that, then you'd also have to look in every other part of your application that might have referenced draft.js and you'd have to go and change those also. That might not seem like a big deal when you're talking about one or two functions but I can promise you in a large application, you do not wanna be doing that. You want to isolate your code as much as possible.

The entire reason why React is so popular, one of the key reasons it's so popular is because you're able to look at your features as standalone isolated components and you should have the ability in a perfect world where you've built the application as well as possible, you should have the ability to reach in, grab a component, replace its functionality, and not have to touch much of the other components.

If the data remains the same, and the inputs and the outputs remain the same types, the other components should simply work. It shouldn't matter if we go and we switch out the rich text editor with a different type of library because at the end of the day, as you can see right here, this rich text editor only expects a string.

It could be a string from anything, it could be a plain text area, it could be another library, as long as it's a string value, it is simply going to do its job. It's gonna take it in, it's gonna update the state and then it's going to add it to the form. So that is all we need to do for our blogForm and in the next guide, we're gonna start walking through how we can update the state and work with draft.js.

Resources

• Source code