So what we want to do is go into components and let's create a new file and let's just call this file formFields.js. Now we did this in the property management app so it should be pretty familiar or at least somewhat familiar and you should have a good resource to go and check back on if you get stuck.

In here we want to import React and component, now let's define our first component and we're going to export these not as default classes we want to be able to have multiple components in this file. So let's just say export class instead of export default class let's say FormInput extends component and then we'll put in our render function and we will return a div.

Now this div is going to contain a className and we're going to want to be able to pass a className in here. So let's put in some braces and let's put in back ticks and then let's put in our className. Now let's give it a default class name of form-input.

formFields.js

import React, { Componet } from 'react';

export class FormInput extends Component {
    render() {
        return (
            <div className={'${className} form-input'}>

            </div>
        )
    }
}

Now one thing you need to know here is that we don't have access to this className the way we're accessing it right now, we have to get it out of our props. So let's say const right here and we'll say className like we did in our signin form.

formFields.js

import React, { Componet } from 'react';

export class FormInput extends Component {
    render() {
        const { className } = this.props;
        return (
            <div className={'${className} form-input'}>

            </div>
        )
    }
}

Okay cool. So that's taking it out of props and then we're using in there. All right now in here we need to basically put in some stuff right, we need to put in an input. Let's go check our application design and you'll see we have a title and then we have a field, so we need to have a title and a field. So let's go into our code here our formFields.js and what we want to do is provide a label, we want to say label and I'll say class name is equal to form input__label.

<label className='form-input__label'></label>

In this label we want to pass in a variable called title, we're also going to need to provide this in our constant here, we're going to want to take it out of props. All right, so that's a good start.

formFields.js

import React, { Componet } from 'react';

export class FormInput extends Component {
    render() {
        const { className, title } = this.props;
        return (
            <div className={'${className} form-input'}>
                <label className='form-input__label'>{title}</label>
            </div>
        )
    }
}

Although we do need to provide an input just so it will work with redux form, so we can't test it until we do that. So let's go ahead and add in an input and let's give it a class name of form-input__input.

Okay now what we want to do is pass in a type so let's say type is equal to type and then let's pass in a placeholder, so placeholder is equal to placeholder and then finally we want to basically spread out the input property that redux form provides us in field. So let's just say ...input in curly braces.

Okay cool, so that should be good. Now one thing we need to do is provide these before we test it out. So after title let's say type place holder and input it.

formFields.js

import React, { Componet } from 'react';

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

Okay so let's go ahead and test this out by going into signInForm and importing it. So, let's say import in braces FormInput from fields, since we didn't export it as a default component, so import FormInput from ../formFields.

import { FormInput } from '../formFields';

Okay, now we have access to it and let's get rid of the signin text and let's say field and then say class name is equal to sign-in-form__ and what was it, e-mail? Let's check the design, I think it's e-mail but it might be username. Email, okay the first one is email then it's password on the site.

signinForm.js

import React, { Component } from 'react';

import { reduxForm, Field } from 'redux-form';

import { FormInput } from '../formFields';

class SignInForm extends Component {
    render() {
        const { className } = this.props;
        return {
            <form className={'${className} sign-in-form'}>
                <Field className='sign-in-form__email'/>
            </form>
        }
    }
}

Okay so remember what we're doing here, we're seeing sign and form e-mail, right. Then we're going into FormInput and taking that className out of props and applying it to our div here. All right, let's go in to signinForm.js and into our Field className, and what we want to do is pass in component and let's say for this prop we want to put in FormInput so we can actually specify that it's of FormInput.

signinForm.js

class SignInForm extends Component {
    render() {
        const { className } = this.props;
        return {
            <form className={'${className} sign-in-form'}>
                <Field className='sign-in-form__email' component={FormInput}/>
            </form>
        }
    }
}

Okay, now that should be enough to test it out, I'm trying to think of anything else we need to do before we test it out, but it should be good. Let's just go ahead and I guess we do need to provide the type in the placeholder and the title but let's just test it out just to make sure we don't have any errors, okay so we have two errors, its a good thing we checked it.

All right, so it says the prop name is marked as required in field. So let's go into signinForm.js and after className let's say name is equal to and we'll just say email. Okay cool, that should be good.

<Field className='sign-in-form__email' name='email' component={FormInput}/>

Now let's go ahead and test it out in the browser and you'll see we have this e-mail form now right, but we don't have a title.

So let's go ahead and let's go back into our code, and let's say type is equal to email and title is equal to email and then placeholder is equal to email. I'm gonna put these all on a different line so you can read them better, so you can see exactly what you need to type in right now.

signinForm.js

<form className={'${className} sign-in-form'}>
    <Field className='sign-in-form__email'
    type='email'
    title='Email'
    placeholder='Email'
    name='email'
    component={FormInput}/>
</form>

Okay, we need our className, type, title, placeholder, name, and component. I'm going to capitalize the Email in placeholder and the title, okay, so that should be good. All right, you'll see we have our label and our input now and that looks great.

Okay, so what we need to do is we need to basically put in our password and then a submit button and then we need to style it. So let's do that, let's go into our application here and let's copy this Field here. And instead of saying e-mail we obviously want to say password and then on the title and placeholder we want to put a capitol Password.

signinForm.js

<form className={'${className} sign-in-form'}>
    <Field className='sign-in-form__email'
    type='email'
    title='Email'
    placeholder='Email'
    name='email'
    component={FormInput}/>
    <Field className='sign-in-form__password'
    type='password'
    title='Password'
    placeholder='Password'
    name='password'
    component={FormInput}/>
</form>

So basically the same exact thing we did with email but password. And since we provided it a type of password it's going to automatically basically say hey this needs to be protected with dots. It's also going to autofill it because it's saying hey this HTML form has an e-mail and password place so let's autofill it if we have any saving information at this URL.

And we all should at this point since we've been using the same localhost if you're using a different port it might not autofill. So that should be good, what we need to do is build out a component for our button right, we want a form button not just a form input, we also need a form button so we can login.

Now what we'll do is we will do that in the next video but we've got a really good start on our form fields file with our form input component in there. And we've got two inputs on the screen and everything's looking good and yeah we'll move on. Let's go ahead and commit our code.

Terminal

git status
git add .
git commit -m "built form input component and placed email and password fields within signinform component"

Okay, I'll see you in the next video.

Resources

Source code