All language subtitles for 003 Setting CSS Classes Dynamically_en

Which alternative could we have

to setting inline styles?

Well, how about the following alternative?

What if we could add a new CSS class to this div

which holds both the label and the input.

And we would add this class dynamically

only if the value entered is invalid.

That could be something like a invalid class here.

The name is totally up to you.

So this invalid class should sometimes be added here

on this div and then in CSS

we could prepare the fitting styles.

For example, here, we could say if the form control also has

the invalid class, and therefore make sure there is no space

between form control and this dot,

which means they both have to be on the same element,

then we could target our input

and set the border color to red.

And we could set the background to red

or actually now pick a much lighter version,

like this very light rose color here.

And if the form control, the div with the class

form control has a class of invalid,

we can also target the label and set its color to red.

So these here would be two CSS rules

that should lead to the desired output.

And all we need to do for these rules to have an effect

is we need to add that invalid class dynamically.

And here's how you can add classes dynamically.

Let's get rid of these inline styles.

We don't need them anymore.

And instead let's see how

we can change this class dynamically.

It's very, very easy.

Since we need a dynamic value, we need curly braces

because a string is always a string.

It's a hard coded string, so we need curly braces.

And now what we feed in, of course,

still can be a string of form control.

But a string where we dynamically add more text in it,

where we dynamically expand it,

or concatenate a value to have this string,

whoops invalid, instead of this string.

So what we pass to class name on this div

sometimes is a string that looks like this,

and sometimes will be a string that looks like this,

depending on what the user entered

and depending on our is valid state.

And for that, we can use a nice construct.

We can use backticks here.

Now, in case you're not familiar with this,

this is a default JavaScript feature.

It's called a template literal.

This constructs a string but we have backticks here,

not single quotes, but backticks.

It's a special character on your keyboard

and whatever you type between there

will be treated as a regular string.

So we can add form control here.

But, and that's not a tricky thing,

you can also inject a dynamic value into that string

with a special syntax, which looks like this,

dollar sign, and then again, a pair of curly braces

opening and closing.

This adds content into the string and what you pass

between these curly braces can be any JavaScript expression.

So a lot like our curly braces inside of JSX.

Here, now inside of the template literal.

So here we could now check if isValid is not true,

hence the exclamation mark at the beginning,

and if that's the case,

we insert invalid here into this long string.

Otherwise we enter nothing

or simply an empty string in this case.

So that simply will make sure that class name is either set

to a string which has only form control, blank nothing,

or to a string, which is form control blank invalid.

So there for now, if we save this,

if I submit this in an empty state, I get my error,

look here, my error style.

But other than that, if I start typing

I go back to the non error style

because we dynamically add this invalid class.

And of course you can inject multiple things

into that string.

So you could repeat the same technique

to add more dynamically added classes.

And that's very powerful because now you're back

to working with CSS files and with classes only

and you can dynamically add or remove classes

with this simple syntax.

And it will be Reacts job to actually add

or remove the classes in the DOM.

You do what you can do best in React.

You specify a goal.

You specify some alternative states, for example,

that the goal sometimes is to have just form control

and sometimes form control and invalid,

and React will make sure that the DOM,

the real DOM, is updated accordingly.

This is React in action

and this is how you can add styles dynamically.