So with the problems I outlined in the last lecture, let's dynamically adjust the button style depending on
whether we're about to show persons or not.
Now we already had a look at how we can dynamically render content like here with the if statement where
we store some jsx in a variable and then output that variable in our template or in our return function
here I should say.
Now as always everything here is javascript
so if we assign a style to the button here, this part between the curly braces can be any javascript
expression.
For one, we could of course pass a javascript object here where we define the styles or we can of course
reach out to the style property,
excuse me, variable I should say as we do.
and we could adjust this style variable dynamically
therefore. Basically here, this state showPersons, if this is true this means persons can be seen.
So as I outlined in the last lecture the button should then have a red background because a click will
remove the persons. On the other hand,
the default setup should be to not have a white background color but a green one
and maybe we want to set the text color to white so that it does stand out with the normal color property.
Now if I state this, we have a green background color,
if I click on it, we see the persons.
Now that the persons are visible though, this should get a red background color.
So what we can do is in our if statement which we already have where we set a person's variable, we can
of course do more besides setting this person's variable here. After doing that,
I can also reach out to style and set the background color property which the style object clearly has,
we set it up here to red of course, simply like that.
So we simply get into this style object,
we don't assign a new value so it's still a constant
but we assign a new value to one of its properties, to the background color
and with this tiny change in place, we already got dynamic styling.
Let me reload this application,
green button, red button, green button and so on.
So this shows one crucial thing which you really have to wrap your head around if you haven't already,
everything is javascript,
I guess I said this before. We change the style dynamically just as we change this variable persons dynamically
just as we change anything dynamically, we're talking about javascript here.
You can manipulate the style object with any javascript code you want and in the end when you then bind
it here, it will simply apply this no matter how you edited it.
This is a crucial take away and this shows you how you can dynamically assign cells,
now what about class names though?
Can we also set these dynamically, can we pass a list of class names?
Yes we can and I will show you how it works in the next lecture.