In a class section we learn that we could reference a javascript variable or a function inside of a
block of GSX by putting down a set of curly braces like so.
Again I want to remind you this is not a javascript object.
It is the syntax that GSX uses to refer to some javascript variable.
Now in this video I want to tell you a little bit more about what different types of variables we can
reference inside of GSX specifically when we're trying to put something in here that's going to display
on our screen as text or some otherwise value are going to first begin by deleting that function that
we just put together.
We don't really need that anymore and it's just going to make this example a little more complicated
than it needs to be.
I'm then going to go back to putting that variable inside the component we had before.
So I'll say Konst button text is click me like so and then inside of our curly braces right here I'll
again replace it with a button text.
And now that we don't have a function we do not need a set of parentheses.
So it just button text like so.
All right.
Very quickly I'm going to save this file and just make sure that everything is still working.
Yep looks good.
All right.
So if we want to you we can reference other types of variables rather than a string here.
For example I could instead replace this with a number.
One two three four five six.
I can then save this flip back over and I'll see that number printed up here.
I could also replace this with an array of say strings or numbers.
I could do something like Hi there.
Two strings inside of an array.
If I then save that and flip back over you'll see the two strings got pushed together are essentially
concatenated inside that button.
And if I want to I could also replace it with a set of numbers like 10 and 20.
I can then say this again and I'll see 10 20 over here.
So we clearly have a pretty good amount of flexibility here.
But there is one particular example of something that I wanna show you right here at the entire point
in this video because I can almost guarantee that you're going to run into this bug at some point in
time and when you see the error message around this bug it's going to be pretty darn confusing.
So I'm going to replace button text right here with a javascript object instead.
This is a plain object.
I'm going to give it a property of say text and I'll say click me.
It's now going to save the file again.
When I flip back over we're going to see a nasty error message appear.
Now I want you to really look at this error message and try to remember it because like I said I can
almost guarantee you're going to see this at some point in time in your re-act career.
Your message says objects are not valid as a react child or react child essentially means we're trying
to show an object like a javascript object inside of a reac component as text and react does not know
how to deal with that.
So we are not allowed to take a javascript object and reference it inside of GSX specifically where
we would normally show text.
We could very easily fix this by putting on a button text dot text.
So now that's going to refer to the text property of this object.
We can save this and we'll see that we're back to working as we were before.
Now the reason that I put a lot of emphasis on that last part saying we can't show an object as text
is because technically we can't show a javascript object as a attribute on an element like this right
here.
Now that you understand the purpose of this clearly braes syntax we can look back at the style property
and get a better idea of what's going on.
So we're really doing here is we're saying we want to reference a javascript variable for this style
property and the value that we're going to pass in is this javascript object.
If we wanted to we could technically cut that thing out create a new variable up here called style assign
the style object to it and then reference that style down here like so.
And that would have the exact same effect.
So clearly we can use javascript objects as long as we're not trying to print them up as text or something
like that inside of our application.
OK.
So that's pretty much it.
I'm going to undo that last little change.
And leave it like so.
And the very last thing I want to mention very quickly is that if we want to we can do multiple interpreters
interpolations inside of a GSX block.
So for example we could extract this to say label text equals enter name and then reference that inside
of our label instead
we can save this flip back over to our browser and we'll see that we still have enter name for the label
as well.
OK so that's just a couple of the big important things for you to understand around the differences
between H.C. email and GSX.
If you look at the diagram over here I made it seem like there is only three issues but there is one
last little thing that I want to show you.
One little thing that you need to be aware of and the differences between GSX and HMO.
So quick pause and I'll see you in just a minute.