Customizing the New and Edit Forms in React

So what we need is a text area. So let's head to our newsletterNewForm.js, and basically what we want to do is put a text area form in here. So let's go into formFields.js and we just want to introduce another component called FormTextArea. It's going to basically be the same as the other components, but with different names.

formFields.js

export class FormTextArea extends Component {
    render() {
        const { className, title, input, type, placeholder } = this.props;
        return (
            <div className={`${className} form-input`}>
                <label className='form-input__title'>{title}</label>
                <textarea
                    className='form-input__input'
                    type={type}
                    {...input}
                    placeholder={placeholder} 

                >

                </textarea>
            </div>
        )
    }
}

Okay, let's just leave it like that for now. And let's go use it to see if this is working at all. OK. Now we have an explicit height, which is like for 40 pixels or 4 rem, so it's going to look like an input, but we'll see how it looks. Let's add it to our newsletterNewForm.js.

newsletterNewForm.js

import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";

import { FormTitle } from "../formTitle";
import { FormInput, FormButton, FormTextArea } from "../formFields";
import TextLink from "../textLink";

class NewNewsletterForm extends Component {
  render() {

    const { handleSubmit } = this.props;

    return (
      <form onSubmit={handleSubmit} className="new-newsletter-form">
        <FormTitle className="new-newsletter-form__title" text="Login" />
        <Field
          className="new-newsletter-form__email"
          placeholder="Enter Email"
          name="email"
          type="email"
          title="Email"
          component={FormInput}
        />
        <Field
          className="new-newsletter-form__email"
          placeholder="Enter Email"
          name="email"
          type="email"
          title="Email"
          component={FormTextArea}
        />
      </form>
    );
  }
}

NewNewsletterForm = reduxForm({
  form: "newnewsletter"
})(NewNewsletterForm);

export default NewNewsletterForm;

So all I did was copy the email field and imported Text area from formFields. Let's go into our application. You'll see the new text area now and you can even resize it, but we don't want the user to be able to resize it causes bugs everywhere, and it's just supposed to be fixed here.

large

We don't have that option in the design, so let's see how big it is. So it should be about 355 pixels high. All right and that should be good. So let's go into our application code and let's go into formFields.js and rename this form textarea. To have a different class and we wanted to say form textarea not form input so let's replace all of these little input classNames with textarea.

formFields.js

export class FormTextArea extends Component {
    render() {
        const { className, title, input, type, placeholder } = this.props;
        return (
            <div className={`${className} form-textarea`}>
                <label className='form-textarea__title'>{title}</label>
                <textarea
                    className='form-textarea__input'
                    type={type}
                    {...input}
                    placeholder={placeholder} 

                >

                </textarea>
            </div>
        )
    }
}

Now we'll have to go into form-fields.scss and provide some styles for these. Right now we have quite a bit of styles that's applied to our form and we just removed that texture it'll look really bad in our application. So what we want to do is still inherit these styles but then just override a few of them. So let's go back to our code and let's put a comma after form input and add form-textarea to it.

form-fields.scss

.form-input,
.form-textarea {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 3fr 10fr;
    // grid-template-columns: 129px 500px;

    align-items: center;
    width: 100%;
    justify-content: center;

    &__title {
        grid-row: 1/-1;
        grid-column: 1/2;
    }
    &__input {
        grid-row: 1/-1;
        grid-column: 2/3;
    }
}

.form-input,
.form-textarea {
    &__title {
        color: $color-red-BA;
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 2.3rem;
    }
    &__input {
        height: 4rem;
        // width: 50rem;
        width: 100%;
        border: 1px solid $color-gray-E6;
        border-radius: .5rem;
        padding-left: 2rem;
        font-size: 1.6rem;
        font-weight: 500;
    }
}

That way we can still get a custom style but have the same styles so we can see it better in our form and know that it is a text area but then still have the same styles and then we can override them specifically only for form-textarea.

form-fields.scss

.form-textarea {
    &__title {
        align-self: start;
    }
    &__input {
        height: 35.5rem;
    }
}

Now that should be about it. Actually that's all we really want except for we don't want this to be an e-mail form, let's go into newsletterNewForm.js and we want to give different different values.

newsletterNewForm.js

        <Field
          className="new-newsletter-form__newsletter-title"
          placeholder="Newsletter Title"
          name="title"
          type="text"
          title="Newsletter Title"
          component={FormInput}
        />
        <Field
          className="new-newsletter-form__body"
          placeholder="Body"
          name="body"
          type="text"
          title="Body"
          component={FormTextArea}
        />

Now let's just check in a newsletter-new-form.scss and we want to do is change this e-mail to newsletter-title.

new-newsletter-form.scss

    &__newsletter-title,
    &__body {
        margin-top: 4.1rem;
        grid-column: input-s/input-e;
    }

Now there's a couple problems, we can still resize it and it's too far below. We only want it to be about 20 pixels below.

new-newsletter-form.scss

    &__newsletter-title,
    &__body {
        margin-top: 4.1rem;
        grid-column: input-s/input-e;
    }

    &__body {
      margin-top: 2rem;
    }

So what we should do is go into our code and inside of form-fields.scss.

form-fields.scss

.form-textarea {
    &__title {
        align-self: start;
    }
    &__input {
        resize: none;
        height: 35.5rem;
        padding-top: 1rem;
    }
}

That's a lot better. Let's just get in a few more of these titles that matches more of what our design looks like. Now let's change the text from login to new newsletter.

newsletterNewForm.js

<FormTitle className="new-newsletter-form__title" text="New Newsletter" />

Now our form should look a little more like the design.

large

You'll see it's looking better, though these are just beautiful design things. But anyway what we need to do is in the next video let's add in the cancel and submit buttons, and then we'll move onto the image, and then after that we should be good with the new newsletter although you'll notice that we're hard coding a lot of these titles. But we'll talk about that.

I'll see you in the next video.

git status
git add .
git commit -m "customized newsletter new form"

Resources

Code at this stage