hey guys welcome back and lastly I’d
like to talk about conditional rendering
and react so we already saw conditional
rendering with the example of showing
error messages for invalid data input so
for example if you type something wrong
in the input box if it was an invalid
date we would actually show an error
message no this is not the case anymore
but if you go to the previous video we
talked about validation you could see
the example for that so let’s create
another component here I’m going to call
it holidays model and this is also going
to help us explore the idea of Lists and
react so it’s import react yeah I’d like
to show you a different way of exporting
components from react so in the past
what we would do is it would typically
create a constant for instance in this
case it makes sense you call it holidays
wallow and then you have your function
right and of course this could also be a
class for a class-based component but
would say we stick to functional
components and then would basically
export holidays model as a default
export but in reality goes to take
advantage of es6 modules and the module
syntax also allows us to export
anonymous functions so instead of
actually creating a constant you could
just simply export a default function in
this case it’s going to be an error
function and it’s going to accept the
props and it’s going to return a JSX or
react element and in this case I’d like
the element should be a model so let’s
go back to the boma documentation here
let’s go to dogs if you click on
components you can see that there is a
section for Moyles and if you scroll
down you can also see an example of a
Moodle car so basically it’s a model
that has a title it has a body as well
as a footer with a bunch of buttons so
we’re gonna use that example so let’s
just go ahead and copy that I’m gonna go
back and just paste it in not just the
spacing a little bit okay and next we
also need to remember to replace class
with class name because we’re dealing
with GSX here and this is basically
extended JavaScript syntax but we need
to stick to JavaScript conventions here
so we need to use class name instead of
class and the same thing also applies
for example
if you have a label in an input
oftentimes you would have a four
actually beep on the label
well that’s not gonna work in JavaScript
so you need to replace that with HTML 4
okay hope that makes sense
and we talked about that before if
you’re not sure about that go back to
the previous lessons in the weightless
and there you’ll find more information
about that and a lot more about geo sex
but let’s move on here so this looks
pretty good I’m just gonna put some
content for now and this will basically
give us a model so if we go back to
index I’m an important model let’s call
it holidays model import from holidays
okay if you go to the bottom let’s just
put it below the controls holidays then
close it off and if you go back to the
application you’re not gonna see it now
the reason you don’t see it probably
already mention it but Beaumont is a
Java Script free library or JavaScript
free CSS framework so it doesn’t have
any jobs kit dependencies so if you want
to add JavaScript behavior to Beaumont
you would need to do it manually and you
can actually see a warning here they
mention that all mothers of having
JavaScript interactions so you need to
implement the JavaScript functionality
yourself and this is actually perfect
for us because we have a react framework
I don’t want to pull in anything like
jQuery or any other dependencies which
would typically be the case with
libraries like bootstrap or foundation
which is one of the reasons why I chose
both so here we need to provide a
functionality here but the idea is
basically if you put a plus of is active
passive is active on the model and
actually you need to put it on the outer
div basically the wrapper immortal if
you go back you’re gonna see the model
right here so the way that you display
the model is basically by conditionally
displaying or conditionally using the is
active class okay so back in index J yes
what we’re gonna do is let’s add a new
property to the state the idea here is
basically you might have
property let’s say show holidays and by
the folk that’s going to be false the
little typo right there show holidays
like I said by default it’s going to be
false because we don’t want to show it
any model when you learn on the page
right so when you go to this page the
model is gonna be hidden but for example
once you click on a button it’s gonna be
shown and you actually need to add that
button right now that I realize that so
let’s add a button here let’s add a
class name actually it’s going to be a
strangle it’s bad button is small let’s
also add is rounded is light and that’s
pretty much it for now let’s both put
some text in there let’s just say
holidays let’s see how that looks like
now that doesn’t look really good if you
go back I think what we’re gonna do is
of course the one thing you could do is
you could add levels if you go to the
documentation in Bomont there’s also a
section under layout it’s called level
and it basically allows you to create a
level that has items that are vertically
centered and also allows you to Center
those elements in fact we used that to
display in a days hours minutes and
seconds so you could definitely use that
in order to align the elements
vertically so in this case we have a
heading as well as the button but it’s a
bit of a fossil in this case I think
it’s just fine to add another inline
style so let’s add an object here I’m
just gonna do margin and let’s also give
it 5 pixels for the top 0 on the right 0
at the bottom and that’s maybe added 10
on the left it looks pretty good so this
is the button so the idea is once you
click on the button it’s gonna open up
the model I’m also going to add a new
property on the model so let’s pass the
property we might call it active that’s
going to determine whether the model
to be active and the active property is
going to match the show holidays
property on the state so I’m gonna add
it right there and I’m also gonna
restructure it from the state so that’s
gonna be passed down to the holidays
model in fact I’m gonna also the
structure that that property of the
props object because I don’t need the
whole prop such it only needs show
holidays I should be it okay so that we
can actually use it directly and in fact
let’s see what happens next
do we have any errors no everything
seems fine so again we just simply pass
the show holidays property down to the
model now by default like I said it’s
false but we also can include a
condition here and this is another
example of how you can basically add
conditional classes to a to an element
worry component for that matter but
instead of a string I’m going to use an
expression at gsx expression we always
need to include the modal class because
whether the model is visible or not we
always need to have that class for
styling purposes but we also going to
have another expression in there and
we’re basically going to say in fact I
think I made a typo we call the property
active right so I’m gonna stick to
active so we need the active property so
if the active probably is true then
we’re going to have is active class and
notice that also plays space in there
this is basically going to concatenate
mortal shrink
what is active shrink and that’s just
basically going to give us two classes
okay and then you can also have a column
so this is just a normal turn arrayed
conditional expression that you would
typically use in JavaScript but
basically like I said the idea is if
activist true we get the is active class
otherwise just an empty string okay if
you save that so the modal is not
visible but for example with the go back
to index and I’m gonna set show holidays
to true let’s see
and we get the model okay so when it’s
false the model is not visible but if
it’s true you get the model no the next
thing is we already have a button here
which is basically supposed to control
the model so once you click on the
button it’s supposed to open up the
model so how do we implement that
functionality no we could actually add
an event to the button so with another
on click event and we would need to pass
a function to that event so in this case
I’m just going to call a local function
let’s call it on handle holidays toggle
or something
the name is gonna make sense later but
basically the idea is you’re talking the
active property on the model so let’s
add that method and I’m also going to
use class properties syntax because we
need to have access to the best keyword
and by default it’s not accessible with
normal class functions I’m just gonna
use that experimental syntax that we
talked about before and let’s do this
set state and we’re gonna pass a new
state object in this example I’m
specifically targeting show holidays and
I want to set it to whatever the show
holidays is not so for example if by
default it’s false and you click on the
button when I set it to true and if it’s
true I want to set it to false that’s
what it does okay
and this should work so let’s go back
let’s click on the button there we go
the model pops up now of course we also
have a button to close it here so I
think we’re gonna pass that but then
actually this one handle holidays toggle
we’re gonna pass it down to holidays
model I’m gonna call it let’s see on
holidays toggle and we’re gonna pass a
reference to that function if you go
back to the model here we’re going to
expect a new property in fact we call it
holidays total but you could also call
it because we’re gonna in the context of
holidays here anyways it probably makes
sense to call it on toggle it’s just a
simpler convention and let’s also do the
following so we have a button that
basically closes the model so what I’m
gonna do is I’m just gonna say when you
click on that button we’re gonna have
the on toggle function executes and will
not execute that’s basically going to
invoke the handle holidays toggle method
and it’s basically just going to handle
the show holidays properly so but I can
here if you open up the modal and you
click on the cross that’s gonna close it
now the other thing is oftentimes with
models
it’ll be desirable if we’re also able to
click outside of the modal so on a black
overlay that’s basically behind the
model so we want to be able to click on
that overlay and also close the model
and that’s not the case right now the
only way to close it will be to click
them across with the X image icon in
this case we have a div here that
basically refers to the background or
overlay of the model that’s basically
just behind it now we could also add
another bond click here right and we’re
just gonna call the same on toggle
function right and if you add that now
if you go back launch the model click
outside and it’s gonna close it so
that’s basically it for the model in the
next video we’re gonna actually display
the list of holidays so I hope you stick around I’ll see you next time
like to talk about conditional rendering
and react so we already saw conditional
rendering with the example of showing
error messages for invalid data input so
for example if you type something wrong
in the input box if it was an invalid
date we would actually show an error
message no this is not the case anymore
but if you go to the previous video we
talked about validation you could see
the example for that so let’s create
another component here I’m going to call
it holidays model and this is also going
to help us explore the idea of Lists and
react so it’s import react yeah I’d like
to show you a different way of exporting
components from react so in the past
what we would do is it would typically
create a constant for instance in this
case it makes sense you call it holidays
wallow and then you have your function
right and of course this could also be a
class for a class-based component but
would say we stick to functional
components and then would basically
export holidays model as a default
export but in reality goes to take
advantage of es6 modules and the module
syntax also allows us to export
anonymous functions so instead of
actually creating a constant you could
just simply export a default function in
this case it’s going to be an error
function and it’s going to accept the
props and it’s going to return a JSX or
react element and in this case I’d like
the element should be a model so let’s
go back to the boma documentation here
let’s go to dogs if you click on
components you can see that there is a
section for Moyles and if you scroll
down you can also see an example of a
Moodle car so basically it’s a model
that has a title it has a body as well
as a footer with a bunch of buttons so
we’re gonna use that example so let’s
just go ahead and copy that I’m gonna go
back and just paste it in not just the
spacing a little bit okay and next we
also need to remember to replace class
with class name because we’re dealing
with GSX here and this is basically
extended JavaScript syntax but we need
to stick to JavaScript conventions here
so we need to use class name instead of
class and the same thing also applies
for example
if you have a label in an input
oftentimes you would have a four
actually beep on the label
well that’s not gonna work in JavaScript
so you need to replace that with HTML 4
okay hope that makes sense
and we talked about that before if
you’re not sure about that go back to
the previous lessons in the weightless
and there you’ll find more information
about that and a lot more about geo sex
but let’s move on here so this looks
pretty good I’m just gonna put some
content for now and this will basically
give us a model so if we go back to
index I’m an important model let’s call
it holidays model import from holidays
okay if you go to the bottom let’s just
put it below the controls holidays then
close it off and if you go back to the
application you’re not gonna see it now
the reason you don’t see it probably
already mention it but Beaumont is a
Java Script free library or JavaScript
free CSS framework so it doesn’t have
any jobs kit dependencies so if you want
to add JavaScript behavior to Beaumont
you would need to do it manually and you
can actually see a warning here they
mention that all mothers of having
JavaScript interactions so you need to
implement the JavaScript functionality
yourself and this is actually perfect
for us because we have a react framework
I don’t want to pull in anything like
jQuery or any other dependencies which
would typically be the case with
libraries like bootstrap or foundation
which is one of the reasons why I chose
both so here we need to provide a
functionality here but the idea is
basically if you put a plus of is active
passive is active on the model and
actually you need to put it on the outer
div basically the wrapper immortal if
you go back you’re gonna see the model
right here so the way that you display
the model is basically by conditionally
displaying or conditionally using the is
active class okay so back in index J yes
what we’re gonna do is let’s add a new
property to the state the idea here is
basically you might have
property let’s say show holidays and by
the folk that’s going to be false the
little typo right there show holidays
like I said by default it’s going to be
false because we don’t want to show it
any model when you learn on the page
right so when you go to this page the
model is gonna be hidden but for example
once you click on a button it’s gonna be
shown and you actually need to add that
button right now that I realize that so
let’s add a button here let’s add a
class name actually it’s going to be a
strangle it’s bad button is small let’s
also add is rounded is light and that’s
pretty much it for now let’s both put
some text in there let’s just say
holidays let’s see how that looks like
now that doesn’t look really good if you
go back I think what we’re gonna do is
of course the one thing you could do is
you could add levels if you go to the
documentation in Bomont there’s also a
section under layout it’s called level
and it basically allows you to create a
level that has items that are vertically
centered and also allows you to Center
those elements in fact we used that to
display in a days hours minutes and
seconds so you could definitely use that
in order to align the elements
vertically so in this case we have a
heading as well as the button but it’s a
bit of a fossil in this case I think
it’s just fine to add another inline
style so let’s add an object here I’m
just gonna do margin and let’s also give
it 5 pixels for the top 0 on the right 0
at the bottom and that’s maybe added 10
on the left it looks pretty good so this
is the button so the idea is once you
click on the button it’s gonna open up
the model I’m also going to add a new
property on the model so let’s pass the
property we might call it active that’s
going to determine whether the model
to be active and the active property is
going to match the show holidays
property on the state so I’m gonna add
it right there and I’m also gonna
restructure it from the state so that’s
gonna be passed down to the holidays
model in fact I’m gonna also the
structure that that property of the
props object because I don’t need the
whole prop such it only needs show
holidays I should be it okay so that we
can actually use it directly and in fact
let’s see what happens next
do we have any errors no everything
seems fine so again we just simply pass
the show holidays property down to the
model now by default like I said it’s
false but we also can include a
condition here and this is another
example of how you can basically add
conditional classes to a to an element
worry component for that matter but
instead of a string I’m going to use an
expression at gsx expression we always
need to include the modal class because
whether the model is visible or not we
always need to have that class for
styling purposes but we also going to
have another expression in there and
we’re basically going to say in fact I
think I made a typo we call the property
active right so I’m gonna stick to
active so we need the active property so
if the active probably is true then
we’re going to have is active class and
notice that also plays space in there
this is basically going to concatenate
mortal shrink
what is active shrink and that’s just
basically going to give us two classes
okay and then you can also have a column
so this is just a normal turn arrayed
conditional expression that you would
typically use in JavaScript but
basically like I said the idea is if
activist true we get the is active class
otherwise just an empty string okay if
you save that so the modal is not
visible but for example with the go back
to index and I’m gonna set show holidays
to true let’s see
and we get the model okay so when it’s
false the model is not visible but if
it’s true you get the model no the next
thing is we already have a button here
which is basically supposed to control
the model so once you click on the
button it’s supposed to open up the
model so how do we implement that
functionality no we could actually add
an event to the button so with another
on click event and we would need to pass
a function to that event so in this case
I’m just going to call a local function
let’s call it on handle holidays toggle
or something
the name is gonna make sense later but
basically the idea is you’re talking the
active property on the model so let’s
add that method and I’m also going to
use class properties syntax because we
need to have access to the best keyword
and by default it’s not accessible with
normal class functions I’m just gonna
use that experimental syntax that we
talked about before and let’s do this
set state and we’re gonna pass a new
state object in this example I’m
specifically targeting show holidays and
I want to set it to whatever the show
holidays is not so for example if by
default it’s false and you click on the
button when I set it to true and if it’s
true I want to set it to false that’s
what it does okay
and this should work so let’s go back
let’s click on the button there we go
the model pops up now of course we also
have a button to close it here so I
think we’re gonna pass that but then
actually this one handle holidays toggle
we’re gonna pass it down to holidays
model I’m gonna call it let’s see on
holidays toggle and we’re gonna pass a
reference to that function if you go
back to the model here we’re going to
expect a new property in fact we call it
holidays total but you could also call
it because we’re gonna in the context of
holidays here anyways it probably makes
sense to call it on toggle it’s just a
simpler convention and let’s also do the
following so we have a button that
basically closes the model so what I’m
gonna do is I’m just gonna say when you
click on that button we’re gonna have
the on toggle function executes and will
not execute that’s basically going to
invoke the handle holidays toggle method
and it’s basically just going to handle
the show holidays properly so but I can
here if you open up the modal and you
click on the cross that’s gonna close it
now the other thing is oftentimes with
models
it’ll be desirable if we’re also able to
click outside of the modal so on a black
overlay that’s basically behind the
model so we want to be able to click on
that overlay and also close the model
and that’s not the case right now the
only way to close it will be to click
them across with the X image icon in
this case we have a div here that
basically refers to the background or
overlay of the model that’s basically
just behind it now we could also add
another bond click here right and we’re
just gonna call the same on toggle
function right and if you add that now
if you go back launch the model click
outside and it’s gonna close it so
that’s basically it for the model in the
next video we’re gonna actually display
the list of holidays so I hope you stick around I’ll see you next time
Please follow and like us: