Original subtitles

Now that we have our form input component, we also want a button component that's custom.

Now.

This button is also going to be a presentational component similar to our form input, and the reason

why we're building them as their own component is so that this component can be used in any other component

that might need consistent input styling that we have across our application.

So what do I mean by this?

Well, up until this point, we've pretty much limited all of our styling for our titles and our menu

items and our collection items all in this or whichever respective component that they're in.

So any styling for the homepage sits in the home page style.

Scozzafava, but now.

We're running into components that we know are going to be reused across the application.

So if we look at our final application, we see that we're going to use the button in our Sinon, we're

going to use the button in our sign up, and we're also going to use our form input across both the

sign and the sign up.

So limiting our form input styles to just the Sinon would cause us to have to repeat that same style

code inside of our sign up as well.

But we don't want to do that.

We want to make components that we can reuse across our application.

And even our button is used in more than just our Sinon page.

We know it's going to be used inside of our checkout and we see that this is actually inversed.

So it's going to have to be a pretty flexible button, including in our shop.

We use something similar as well.

So how are we going to build this?

Well, first, let's just start with building our sign button for our sign in page will add the functionality

as we require it, because this way it allows us to re-evaluate and properly consider the tradeoffs

of how we should build our button.

So let's go back to our component.

And let's add in this new custom button component.

And let's just make custom button component such as sex.

And custom button.

Styles, Dot says.

We'll import react.

From react or import in our story.

And then we're just going to export a stateless functional component called custom button.

And it's just going to render a button component.

And then we're going to attach the styling to our custom button class name.

Now.

You might wonder if this is a button, but in our actual Sinon component, we were using an input to

do our HTML form submission.

How would it continue to work if we switched it to a button wall for both button and input, they can

both take this property of type submit and they can both submit the form that they're in.

They'll both trigger when clicked if they have the type, submit the on submit method on our form.

So what we want to do is we want to be able to pass that in, so what we'll do is we'll first pull the

children off of our props that get passed into our custom button, and then we're going to d structure

all the other props into this other props property and spread that into our custom button.

Now, if we have a type submit being passed into custom button, the button will get that and then we'll

put children inside of our button component.

And now if we export our custom button.

And then we add in our custom button styles, which I have provided right here.

We can now import our custom button into our component.

And replace this input with it.

Now, instead of doing a value here because we have children, we're just going to put a sign in like

so.

And now we have our button.

There's a little bit of styling we need to add to our sign and component itself.

And what we will do is we will go to our sign and styles.

And we're just going to add.

A display Fleck's.

A flex direction of Collum, because we want all of our elements inside of our Sinon to sit vertically.

And then we're also going to add a bit of a margin between our title, so we're going to put margin

of 10 pixels.

On the top, in the bottom.

And now we have air, our Sinon component, so next we're going to start integrating with Firebase.

And that is going to be a really exciting lesson.