In the last video we had a strange error happening with Chrome, and what actually was happening was I had like 10 megabytes left on my computer. So it was freezing up chrome. I freed up like 20 gigabytes and it's working again.

So you log in, we're fetching all our data, and everything's good. Now what we want to do is be able to click our edit button and have it show new newsletter form, but with all of our data in it and a few different titles.

All right so when we click our button, right now it doesn't show anything so the first step in doing this is to show that component. Let's head over to newsletterLatest.js and in our handle edit function that the button calls, it pushes us to '/newsletter/edit'.

Let's go to our routes, which are in bootstrap.js and we need to make it push us to the new newsletter and we're going out to refactor it and a few other things, but not right now. Let's copy and paste our new newsletter component. Now since this is right in here we might as well just make an edit newsletter component.

It'll be super simple. Let's go create a new file and call it newsletterEdit.js, and then let's go to our newlsetterNew.js and let's copy everything and throw it into our newsletterEdit. Now, we'll rename our things to NewsletterEdit.

newsletterEdit.js

import React, { Component } from "react";

import NewNewsletterForm from "./newsletterNewForm";

class EditNewsletter extends Component {
  onSubmit = fields => {
    // if(button == 'submit') {
    //   // save new newsletter on the backend. perform a post request here.
    //   console.log('trying to submit to backend.');
    // }
    this.props.history.push("/dashboard");
  };

  onCancel = () => {
    this.props.history.push("/dashboard");
  };

  render() {
    return (
      <div className="new-newsletter">
        <NewNewsletterForm
          onCancel={() => this.onCancel()}
          onSubmit={event => this.onSubmit(event)}
        />
      </div>
    );
  }
}

export default EditNewsletter;

All right so let's go see if this is working. Let's hit the button and it brings us to new newsletter.

Now it has a bunch of titles and stuff that we don't want, we want it to say Edit Newsletter. That's all we really want to change. And of course, we want to have it populate with the data that exists, which is actually relatively simple.

All we have to do is provide a title prop for our new newsletter form. So let's add that into our newsletterEdit.js say title is equal to edit newsletter.

newsletterEdit.js

  render() {
    return (
      <div className="new-newsletter">
        <NewNewsletterForm
          onCancel={() => this.onCancel()}
          onSubmit={event => this.onSubmit(event)}
          title='Edit Newsletter'
        />
      </div>
    );
  }
}

Right now what we want to do is go into newsletterNew.js and do the same thing except for say new newsletter.

newsletterNew.js

  render() {
    return (
      <div className="new-newsletter">
        <NewNewsletterForm
          onCancel={() => this.onCancel()}
          onSubmit={event => this.onSubmit(event)}
          title='New Newsletter'
        />
      </div>
    );
  }
}

Okay now let's head into our newsletterNewForm.js and in here we want to basically provide the ability of a custom title and that's pretty easy to do, especally since we're already bringing props in.

Now when we go to our browser you can see our custom titles. Now let's go back to our code and let's get rid of the text link import in our newsletterNewForm.js.

Now what I wanna do is basically get the data from our object into our form. Okay. So we have to provide the newsletter, but how do we get the newsletter? We can't just hook up a mapStateToProps function because we really have no idea how to get that into our form. We just clicked on a button that brought us here, it has nothing to do with our object and we can't just pass our object.

What we can do, however, is we can pass in an ID with the push. We can get the id out of our newsletter latest by adding our id to props. Now with this ID we can just say "hey let's attach it to this push and then we can fetch it".

Okay so let me show you what I mean. First things first, we have to go into bootstrap.js and we have to tell this route that it needs an ID with it.

bootstrap.js

<Route path='/newsletter/edit/:id' component={requireAuth(EditNewsletter)}/>

Putting the colon in front of id tells us that it's a query parameter. Now what we can do is go into newsletterLatest.js and we'll pass the id through the push.

newsletterLatest.js

handleEdit = () => {
        this.props.history.push(`/newsletter/edit/${this.props._id}`);
    }

So let's go ahead and see what happens when we click on our button. Up above you can see the id 115 and in a typical case when we hook up our servers, it's going to give us a big id, but right now it's just our local data that we hardcoded in and it's all working.

This is going to allow us to take this id and filter out our newsletters for that specific id and then we can get the data from this newsletter, right from the object that is associated with that id.

So what we want to do is access that id. I'll show you how to do that in the next video. Let's commit our code.

git status
git add .
git commit -m "modified newnewsletterForm to take in a custom title and added newsletter edit route with id query param"

I'll see you in the next video.

Resources

Code at this stage