Original subtitles

Styled components can be very useful,

but can we also use them for our div here for example?

The answer is absolutely.

If we want a styled component

which we really only use in this file,

we can also create it in that file.

We can also create a brand new file

as we did it for the button.

But even though we're only using the button here

in this app, you could argue that a button is a component

you might be using in a lot of other places

of the app as well.

Now for the div, that might also be the case.

Maybe you have other form inputs

in other parts of the app as well.

But to also show you

that you can have multiple components per file

and that this might make sense

if a component is really only getting used in that file,

I will now create a brand new component

in that CourseInput file.

Thus far, we always had one component per file,

and that generally is a good rule to keep.

But if you have a component that is really only getting used

by the other component in that file,

having both components in the same fall can make sense too.

So here I want to have my form control, for example.

That name is ultimately up to you.

But since I'll use it as a component in JSX,

it should start with a capital character.

And here again, I'll use the styled components package.

So we can import style from styled dash components.

And then here we can use styled.

And in this case, styled div,

because I want to replace this div later.

So I want to render a div.

So if I go up, I have my styled div

and now the backticks.

And now in here, I want to have those styles.

So we can grab all those from-controlled styles here,

copy them, and add them here between the backticks.

Now, just as before, get rid of the selectors.

Just have your styles in here.

And if you have something like this,

where you have the class that is on that div,

which you're creating here,

and then you wanna target a nested element,

you do the same as we did

in the button with the pseudo-selectors.

You simply use AND,

and this tells styled components

I'm now talking about labels inside of this div

so that AND always refers back to that component

which is being created.

And if you then wanna have nested selectors

you wanna target, that is how you do it.

So we can do this here,

also for the input, of course.

And also here if we have an input that is focused.

And also here if we wanna check whether we have invalid

on this div.

And also here.

With that, we have our styled component,

our form control, which is this styled div.

And now we can go back here

and now replace this div here

with our form control.

If we saved that, it generally works,

and you will see here on that div

we also have these strange unique classes.

You will also see that these are, of course,

different classes than we have on the button,

because, as I said, you'll have unique classes

per component to ensure that styles never spill over.

But you'll also see that if I submit as an empty state,

we don't get the error state here.

Now, of course, this can't work

because we're no longer setting the invalid class here.

And we need that invalid class here in our rules though.

Here and here.

Now the good thing is that the styled components,

so the components returned by these styled components

functions, forward all props you set on them

to the underlying components,

so to the underlying div here.

So we can still add a class name here.

And here, the value we wanna pass in is either

an empty string or invalid.

We no longer need to set form control

because the styles that were attached by form control

are now already getting attached with this setup

we have up there.

So instead of adjusting to set this to invalid or nothing,

so what we can do here is we can simply check

if not is valid.

And if that's the case, I add invalid as a string here.

And with this syntax, I otherwise add nothing,

which is perfectly fine because I need no other clause,

if it is valid.

But if it is invalid, the invalid class is getting added.

And now with that, we have the same behavior as before here

if we add goals.

That, however, is only one way of doing this.

We can do this, and it's perfectly fine,

but you can also utilize another feature

provided by styled components.

You can also add props to your to your styled components

and utilize those props inside of these backticks,

so inside of your styles

to easily change styles dynamically.

How does this work?

Let's say here on our form control,

when we use it down there,

we want to add an invalid prop,

name is up to you because it's your component,

and this should be true or false.

The value we feed in, therefore, is not isValid.

So if isValid is true, we feed in false

because it's not invalid if isValid is true.

If isValid is false, we feed in true,

because invalid is true if isValid is not true.

So we set invalid to true

if what the user entered was invalid.

And this invalid prop can now be used

between those backticks here.

Now, how do we use it?

Well, we wanted to change the border color

of the input, for example, right?

So we go to the place where we set up the border color.

And now here, since you're between backticks,

you can use this dollar sign, curly brace syntax

you already know.

And here you pass in an arrow function,

which receives props as a parameter,

and then should return the text that should be returned

in this exact position.

This function will be called

by the styled components package;

and for props it will feed in all the props

your component gets, so, in this case, the invalid prop.

So here we can now check if invalid is true.

And if this is the case, we return red as a text;

otherwise, we stick to this grayish color.

And this should, of course, be props.invalid.

So with that, we're having this dynamic way

of changing parts of the styles

based on some props that are passed

to our styled component.

So does this.

Now, we also want to set the background color.

So I'll set background here to a dynamic value.

And just as before, I check props invalid.

And if it is invalid, I set this background to

this light reddish color here we picked earlier,

and otherwise I'll set it to transparent.

And with that, we can remove this style here.

Now we can all already remove the label style,

which was based on the existence of the invalid class

which we no longer add.

And instead go up to the label styling here

and add a color definition.

And just as before, the value we set for color is dynamic.

We provide this function, which will be called

by the styled components package.

And we check if the invalid prop is true.

If it is, we set a color of red;

otherwise, a color of black.

And with this approach, if I save this,

we've got the exact same behavior as before as you see.

But now by utilizing styled components only

and by utilizing this feature

of dynamically changing parts of the styles

based on the props that are set on your styled component.

This sometimes can be hard to get into this way of thinking

but it's always a pretty nice way

of working with components and styles.

Therefore, I wanted to show this to you.

Now, there's one last brief use case which I wanna cover

before I show you a more CSS-ish alternative.