In the last lecture you learn how to set styles dynamically. In the end, you learned you simply use javascript
to manipulate whatever you then bind to that style property.
Now class name of course also can be set dynamically, like here for the app
but we can also introduce a new class to have something to play around. So we could for example say that
we want to change something in our code here.
Let's say this paragraph here, this is really working depending on whether our list of persons has three
elements as it does have at the beginning or less.
So maybe we want to color the text red
so I will add a new class which I'll name Red, normal css class reset to color red and
this will of course affect the text color, and maybe we even want to make it bold so I'll name a class, I'll
create a class named bold,
the name is up to you if we are at one element left so font-weight bold.
I get two new css classes,
these are available globally
but right now I'm not using any.
I now want to set the class name of this paragraph dynamically depending on the length of the elements
in my person's array here, below 2 or 2 or less elements I should say turn it red, 1 and less red and
bold.
So to do that, I of course also need to adjust the classes or the class name I set to this paragraph dynamically.
So what I'll do is I'll create a new variable here which I'll name classes and the name is totally up
to you,
where I in the end will create an array of strings.
This is one way of doing that, here
I will add red and bold and these are just the class names I defined here,
red and bold without the dot,
just the class name.
I will then call join here and join them with an empty space,
this will turn this array of strings into one string which is in the end just red bold,
this is what we'll get in the end.
This is a valid css class list we can assign to class names.
And of course I could've create it this manually but I will soon edit this array dynamically which is why
I want to have a generic solution.
I can now go to this paragraph and add class name
and of course I don't have to bind this to a string as I do here.
I can also bind this dynamically with single curly braces to the classes variable I have which keep in
mind is just a string joined with an empty space.
If I now save this and make sure you also saved the app.css file,
now let's go back to the application and it's red and bold,
right from the start without us touching any persons
that sounds a bit weird but you know what I mean.
So it's red right from the start because we've always assigned these classes.
Now we can add some dynamic nature to that,
we only want to do that if it's less than one person, otherwise should be red.
If it's less than 2 or less and equal actually and if we have all three persons, none of these classes
should be attached.
So let me actually do something else, I'll remove the join statement here and set classes to an empty
array
and then I will simply add an if statement here
and if this.state.persons.length is smaller or equal than 2,
So only two or less persons left,
I will take classes, this variable and actually let is just ES6 version of var
but we can use const here because I'm never assigning a new value.
So if this is less than two, I will call push, the normal javascript push method to push the red class
onto this array.
So at this point of time, classes will be red like this.
I also will add another if check where
I will say if state.persons.length is smaller or equal than one
and please note, this is no else if condition,
it's just another if statement or if check coming after the first one because I want to run both.
So if it's even smaller or equal than one, then I will reach out to classes again and push another class,
the bold class,
so at this point of time classes is red and it's also bold.
Now if we have only two elements in the persons array, we will just have red and we will skip this because
this condition here will be false.
Now we've got an array of classes which might look like this or like this or be an empty array
if we have all three elements. So I want to assign it here and classes like this won't work anymore because
now it's an array,
we need to pass a string here though.
Well I can simply call join with an empty space in between,
so a whitespace character on classes here when I assign it, I could of course also do this prior to
this and store it in a new variable.
With that, I'm now assigning a string which is simply my joined array, either nothing, either just red
or red and bold with a white space in between.
And now with that let me save this and go back, if it now reloads,
it's a black text by default.
Now let's toggle the persons and let's remove one,
now it's red but not bold.
If I remove another one now it's also bold
and now if I've removed a third one it stays like this obviously. This is showing how you can also dynamically
edit and assign classes
and I can't emphasize it enough,
everything is just javascript.
So you work with your array of classes here as you do with a normal array because it is a normal array
in normal javascript and all you do in the end here is you have to make sure that you actually assign
a string as we do here with the join method.
And of course you could have whatever logic you need to construct an array of classes or get a string
with css classes by other means without joining an array, whatever you have.
Maybe take some user input which is a string by default,
you can assign anything which is a valid string to class name and it will then be handled as a list
of css classes which hopefully meet the classes you set up in your css file.
So with that you learned how to dynamically assign styles, edit them and dynamically assign and
edit classes.