Now, before we do this, I want to do is develop a couple more components. I want to develop one more for each one of these forms because we don't actually want the form to be right in here. We want to provide a form component for each of these components.

We did that in the property management. If you want to reference that, it's going to be exactly the same. Let's go into the auth folder, let's create a new file, and let's call it signinForm.js. Now, let's copy our signin.js component, and let's throw it into signinForm.js.

Now, let's make some changes here. Let's call this SignInForm. Let's replace all these SignIns with SignInForm. What I want to do is change that className to sign-in-form. Let's rename that div to form.

Now, in signin.js, we want to get rid of all the redux-form in here. We don't want this to be the form. This is just a component that contains our SignInForm. This component will strictly handle doing something with the data that we collect in our form.

Think of SignInForm as data collection. Basically, it's where the data goes. Where we're collecting it from the user. Then think of SignIn as the middleman between SignInForm and whatever we're going to do with that data. This component is going to handle our data, so let's get rid of this text and let's place SignInForm with it.

signin.js

import React, { Component } from 'react';

import SignInForm from './signinForm';

class SignIn extends Component {
    render() {
        return (
            <div className='sign-in'>
                <SignInForm/>
            </div>
        )
    }
}

export default SignIn;

Make sure you import it. Now, one thing I want to do is make it so we can pass a className into the SignInForm. Now, this is something we're going to be doing throughout this course, and throughout all the React apps.

Now, I'm pretty sure I did that in the last set of videos, but we're going to be doing it in this video well. What we want to do is pass in a className prop in your SignInForm. Let's call it sign-in__form.

signin.js

class SignIn extends Component {
    render() {
        return (
            <div className='sign-in'>
                <SignInForm className='sign-in__form' />
            </div>
        )
    }
}

Now, let's go into signinForm.js and accept this in. The way I'm to accept it is by going under the render in our render function, and saying:

signinForm.js

import React, { Component } from 'react';

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

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

SignInForm = reduxForm({
    form: 'SignInForm'
})(SignInForm);

export default SignInForm;

That will basically extract the className out of this array. Now what we can do is replace these apostrophes with backticks. Then what we want to do is throw in this variable className using a $ and a set of {}.

signinForm.js

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

Basically, this is just showing us sign-in__form and sign-in-form. Now, you might be thinking that's a whole bunch of redundant classNames. Why can't we just type it in here? You're right, but at the same time, it makes it a whole lot easier to read this.

It's a lot easier to look at signin.js and see we got a form here, in sign-in__form, under the tag that belongs in this div than going in here and saying why is there an __form. It makes it really confusing. We're never going to be using this component elsewhere.

I mean as far as I know, but it does make it reusable and it makes it super readable. A lot more readable once you understand what's going on. Let's go ahead and check out what it looks like in the browser. I can already tell now this is probably going to mess around with our positioning of things because this is now in signin.js.

This sign innn text is now in this div. It's no longer in the layout div. The SignIn component is still in the layout div, but the sign innn text isn't. Now, it's most likely going to appear at the top left still. Let's go check it out. You'll see it's still there.

Let's open up our body in the elements in our Google Chrome. Go there, and open up app-wrapper, layout, and sign-in. You'll see that we have a form in there in the sign-in div. Really good structure there, and it looks good.

You'll also see we have sign-in__form in sign-in-form. Now, what we can do with these classNames is we can go into our signin.scss, and we can say:

signin.scss

.sign-in {
    grid-row: content-s/content-e;
    grid-column: s/e;

    &__form {

    }
}

.sign-in-form {

}

You could also take this and put it right here. That would work because it's still within sign-in. Back in Chrome, you'll see sign-in-form is still within sign-in. You could also put in sign-in__form, but the whole reason we're doing this syntax is to make it readable and so we can reduce syntax.

We have our CSS here now. Let's go to signinForm.js, and that looks good. Now, I would have us do the same thing with signup.js, but that's a lot of code. We're getting a little more complex into things.

What I want to do is basically build out this form completely and have it submit and all that junk before we hop in to signup.js. I just wanted to provide a default SignUp component before getting on into the heavier stuff.

Let's worry about SignIn and let's get those fields in there. Let's go into signinForm.js. We are already importing Field, so we want to use this. Now, we can't use it right away because we need to develop a component that we can actually use with our field because the field takes in a component.

Let's commit our code and get into that in the next video. Let's say:

Terminal

git status
git add .
git commit -m "built signinform component for the signin component"

I'll see you in the next video.

Resources

• Source Code