In this guide, we're going to be able to populate the title and then the status and then in the next guide, we're gonna see how we can add our content into the rich text editor and then lastly, we're going to perform the same type of task for our image uploader.

So, let's get started in this guide. The very first thing we need to do is in the blog-detail page, if you go here to where we're calling the BlogForm, we need to pass in a couple things.

First, we need to say that this is in edit mode, so our blog-detail component knows about editMode but our BlogForm doesn't, so we're gonna pass that in as a prop and then we're also going to pass in the blog itself, so we're gonna pass in all of that data directly into the form, so let's start with that.

I'm going to add these props of editMode, set that equal to this, or actually this one for editMode, let's come up here, let me make sure that I have the right name, yeah, so we have editMode and I'm gonna say this.state.editMode and then the next thing is going to be the blog itself, so we can just pass it in as blog, sometimes I also call it blogToEdit, it's completely up to you, just name of a prop that is nice and intuitive.

So, I'm gonna say the blog is equal to this.state.blogItem. Now that we've passed that directly in as a set of props, now we can go to our blog-form and I'm going to add in one more piece of state here. I'm gonna add in an id, it's gonna start off as an empty string and the reason why I'm doing this is because we're going to pre-populate the id whenever we call editMode.

So, we're not gonna use id for new blog posts, but in the case of an edit post, we do want a spot where we can store that ID. So, I'm going to add that to the base state and then let's add a componentWillMount lifecycle hook, so componentWillMount, it won't take any arguments and inside here what we're gonna do is I'm gonna say if this.props.editMode, if this is true, I want you to pre-populate some of the data.

So, I'll call this.setState. I'm gonna set the id equal to this.props.blog.id and then we're going to do the same thing for the title. So, I'm gonna say this.props.blog.title and then let's also do it for the status. We're not gonna worry about the content at all in this guide. Okay, so that is everything that we need for updating the state.

blog-form.js

componentWillMount() {
  if (this.props.editMode) {
    this.setState({
      id: this.props.blog.id,
      title: this.props.blog.title,
      status: this.props.blog.status
    });
  }
}

So, let's check this out, open up the browser again, scroll down to our Content page. Now, if you click on the title, you'll see that we are now populating our Content page title attribute and also the blog status, so this is working perfectly.

We have all of the data coming from the detail component into our blog form, at least as it regards to the title and the status. So, now that we have that, in the next guide, we are going to continue moving along and we're going to see how we can dynamically add our content, so everything that goes in the rich text editor, we're gonna see how we can pass that in to that what you see is what you get editor component and establish a base state for that.

Resources

• Source code