So what you'll see in the design is that we have this image here. It's about 137 by 160 and it's got a replace button in the middle. The idea is we want an image, we want a title of course, and we want a button to do something with that.

Now, it's going to be a little tricky the way we do this because we're going to use a hidden input to get the effect we want so that we would be able to style it this way. Let's just know for now that this needs to be 137 by 60 and we need that title. So let's go build this component.

Let's go to formFields.js and let's copy this entire form input and just paste at the bottom here so we can rename it to form image, and change up the functionality.

formFields.js

export class FormImage extends Component {
    render() {
        const { className, title, input, type, imageUrl } = this.props;
        return (
            <div className={`${className} form-image`}>
                <label className='form-image__title'>{title}</label>
                <img
                    className='form-image__image'
                    type={type}
                    {...input}
                    src={imageUrl}    
                />
               {/* replace button/input */}
            </div>
        )
    }
}

OK. Now let's go to newsletterNewForm.js and let's go to the bottom here and let's just put in another field.

newsletterNewForm.js

        <Field
          className="new-newsletter-form__image"
          small={true}
          name="image"
          type="file"
          title="Image"
          component={FormImage}
        /> 

Ok let's go check it out, and we need to place it inside our grid. Oh, don't forget to import it at the top of our newsletterNewForm.js.

When we open up our browser, we can see that it says image, but it's small and in a random place.

Let's open it up in Firefox to look at our grid. Okay, so we actually haven't placed it in the grid at all yet, but we want to place it to the left of our newsletter body. When we put this into our grid it will mess it up a little bit because we didn't really place the body anywhere on the grid. It's just auto-filling it in to where it is right now.

So let's go into newsletter-new-form.scss and add in our image styles.

newsletter-new-form.scss

    &__image {
        grid-row: 3;
        grid-column: s;
    }

Let's check it out.

Okay, as you can see it's putting it on row three, but body is being put onto a new row, so let's put the body on row 3 as well.

newsletter-new-form.scss

    &__body {
        grid-row: 3;
        margin-top: 2rem;
    }

Now it's on the same row. So what we want to do now is just throw this image to the bottom using align-self, since it's already against the left side. Let's add that in.

newsletter-new-form.scss

    &__image {
        grid-row: 3;
        grid-column: s;
        align-self: end;
    }

Let's make sure it's where it needs to be.

Now it looks like it's too far down but that's just because we haven't given our image get the other the actual image in here. So let's go ahead and end, and in the next video we'll style this component so that it actually looks like the design. Let's further develop this component and the styles in there and then the functionality.

So let's commit our code.

git status
git add .
git commit -m "built formImage component and placed one on newsletter new form"

Resources

Code at this stage