- Read Tutorial
- Watch Guide Video
We want it to be a re-usable component because the layout and the components are exactly the same. It's just the titles that we need to be different. We are getting the functionality out of these components out of the parent component, like newsletterNew.js and requestsNew.js.
We might as well just take this additional step to put in custom placeholders and titles because that's all we need to do. We don't need to create a whole other component. So let's go to our newsletterNewForm.js and let's adjust it to take in props that are different.
I'm just going to write out a whole new set of props so it doesn't get too confusing for you. I going to say:
newsletterNewForm.js
render() {
const { handleSubmit, formTitle, newsletterToEdit } = this.props;
const {
fieldOnePlaceholder, fieldOneTitle,
} = this.props;
For now, we're just going to deal with the fieldOne and fieldOne, and see if it works. Let's take fieldOnePlaceholder and fieldOneTitle and put it into the field one placeholder and title. So the first one is Newsletter Title.
Let's just take this and let's provide it as a prop to the newsletterNewForm.js from the newsletterNew.js before we put that in. Let's go in here and let's say:
newsletterNew.js
render() {
return (
<div className="new-newsletter">
<NewNewsletterForm
onCancel={() => this.onCancel()}
onSubmit={event => this.onSubmit(event)}
formTitle='New Newsletter'
fieldOnePlaceholder='Newsletter Title'
fieldOneTitle='Newsletter Title'
/>
</div>
Now let's go into newsletterNewForm.js and let's put these in. So title is going to be:
newsletterNewForm.js
return ( <form onSubmit={handleSubmit} className="new-newsletter-form"> <FormTitle className="new-newsletter-form__title" text={formTitle} /> <Field className="new-newsletter-form__newsletter-title" placeholder={fieldOnePlaceholder} name="title" type="text" title={fieldOneTitle} component={FormInput} editValue={title ? title : null} />
Let's go test it out now, but first, we need to provide a placeholder and title to our NewRequest component. You'll see if we log in, let's hit New Newsletter. You'll see it works, but when we go to requests and hit you'll see it's just blank because we didn't provide these props.
What we need to do is we need to go in here and provide these props into our requestsNew.js. I'm going to go to newsletterNew.js and just copy it and replace the values. Let's copy this placeholder and title and let's paste it into requestsNew.js. Right here.
Let's change this to match our design so we want it to say Service Request Title and Service Request Title Here. So let's say:
requestsNew.js
render() {
return (
<div className="new-request">
<NewNewsletterForm
onCancel={() => this.onCancel()}
onSubmit={event => this.onSubmit(event)}
formTitle='New Request'
fieldOnePlaceholder='Service Request Title Here'
fieldOneTitle='Service Request Title'
/>
</div>
Let's see if this works now. Let's log in, when we hit New Newsletter you'll see it has Newsletter Title, when we go into requests and hit this, you'll see it says Service Request Title and Service Request Title Here.
I'm going to go pretty quickly now and get the rest of this because it's just one other field. Newsletter Body and Body. So let's look at the design and see what it wants, it wants a Description and Service Request Description Here. Let's provide some props, let's say:
requestsNew.js
render() {
return (
<div className="new-request">
<NewNewsletterForm
onCancel={() => this.onCancel()}
onSubmit={event => this.onSubmit(event)}
formTitle='New Request'
fieldOnePlaceholder='Service Request Title Here'
fieldOneTitle='Service Request Title'
fieldTwoPlaceholder='Description Here'
fieldTwoTitle='Description'
/>
</div>
You'll see that this doesn't have a default image but back in the New Newsletter it does, and you'll see back in the New Newsletters it says service requests description and title. We can fix that. Obviously, we already did that when we said body in Newsletter Title.
Anyway, the point is I'm showing you how to put custom data into the same component. That's what I'm trying to get at here. It doesn't really matter what data you put in there that's not what I'm trying to teach you. I'm trying to teach you how to build cool components that work. That are reusable.
What we need to do now is put in that fieldTwoPlaceholder and Title. We got that in the requestsNew.js, so let's just copy this and go into newsletterNew.js and paste it in here. We'll just leave it at the same. We'll say Body Here and Body. That's what it says in the design.
newsletterNew.js
render() {
return (
<div className="new-newsletter">
<NewNewsletterForm
onCancel={() => this.onCancel()}
onSubmit={event => this.onSubmit(event)}
formTitle='New Newsletter'
fieldOnePlaceholder='Newsletter Title'
fieldOneTitle='Newsletter Title'
fieldTwoPlaceholder='Body Here'
fieldTwoTitle='Body'
/>
</div>
Now, we need to provide these props in our newsletterNewForm.js because right now we're only doing fieldOne and One. So let's copy this and pate it right here. Put a comma after fieldOneTitle. We have a few options now, but we want to change this to Two. So let's change this to Two.
newsletterNewForm.js
render() {
const { handleSubmit, formTitle, newsletterToEdit } = this.props;
const {
fieldOnePlaceholder, fieldOneTitle,
fieldTwoPlaceholder, fieldTwoTitle
} = this.props;
Now, this is pretty obvious. What we want to do is come down here and just change it for the body, so let's say:
newsletterNewForm.js
<Field className="new-newsletter-form__body" placeholder={fieldTwoPlaceholder} name="body" type="text" title={fieldTwoTitle} component={FormTextArea} editValue={body ? body : null} />
That's good. We're good with the submit. We're good with the cancel. That should be it. Let's go ahead and check our application. You'll see if we log in and hit New Request or New Newsletter. It looks the same.
Then when we go to cancel and requests hit new, you'll see we have this here. So we're all good there.
Now we're set up so we can create our functionality and create new requests so that we can fetch them, display them, and filter them based on their status. Let's commit our code and do that. Let's say git status, git add ., and let's say git commit -m "refactored newsletternewform to take in custom data".
Now, this just occurred to me. We're using this form in here when we edit requests, so my prediction is when we click this it's going to not have any of these titles and stuff. Let's hit this. You'll see there's no titles now.
What we need to do is on this we need to provide the fieldOne and fieldTwo titles real quick. So let's go to our code and let's go to let's go to newsletterEdit.js. Let's just say:
newsletterEdit.js
render() {
return (
<div className="new-newsletter">
<NewNewsletterForm
newsletterToEdit={this.props.newsletterToEdit}
onCancel={() => this.onCancel()}
onSubmit={event => this.onSubmit(event)}
formTitle='Edit Newsletter'
fieldOneTitle='Newsletter Title'
fieldTwoTitle='Body'
/>
</div>
That should fix that. Let's go check it out. It's going to reload, we're going to have to log in. We're going to have to hit Edit. You'll see it's there now.
Let's go check it when we click on one of the archive items now. It still works because we're using the same components. Sweet that works. Let's go ahead and commit our code one more time because we just made another change.
Let's build in the functionality for adding a new request. Let's say git status, git add ., and let's say git commit -m "provided newsletterEdit.js component with field one and two titles".