now this is basically get for handling
forms let’s move on to validation now so
what the validation the idea basically
here is whenever you type something of
course if it’s gibberish and then click
on reset you see that the logic is going
to break here we get Nats this is
because I didn’t type an actual value an
actual valid date and when we call the
moment wrapper a moment function on it
it was not able to convert that string
to an actual date so we need to provide
some kind of validation here let’s add a
new property on the state in this
property you’re going to be called valid
by default we’re gonna say that it’s
true now here we have the event object
but of course we can also use the
structuring so we don’t actually need
the whole event object and we don’t
actually need the target sub object of
that event object we can actually
destructure it so we need to get access
to the target okay but specifically we
need to extract the value from that
target so I’m going to use deep
destruction here this will basically
allow us to access the value from that
object whenever I use the two curly
braces we are going to end up the
variable that we end up in the end is
actually value so we don’t care about
the target just give me the value and
let’s do console.log of that value and
we’re gonna set that value on the date
okay let’s save that let’s type
something out and as you can see here it
updates to sticked it the the value that
we get is basically going to be the
value of target on the event object so
just a bit of restructuring for you
there next so here basically we want to
validate the value that you typed so we
want to also update the valid property
now the one thing we could do is let’s
say and we were to add constant date and
we’re going to just wrap it into the
moment call and this is going to convert
the value to a moment object and of
course they will not necessarily be
valid
that’s what we have to valid property so
we’re going to call a few methods here
so we could do date is valid when you
call that method any moment object it’s
going to give you other true or false
it’s going to be true if it’s actually a
property like a proper date let’s save
it and let’s actually check in the
browser it’s gonna open the react dev
tools let’s go to the input so we have
the input here we have the date picker
it’s valid by default so the valid
property on this date is true if I type
gibberish it’s going to be false but if
I try it if I type something valid let’s
say 2018 that’s a valid date for a
moment moment actually recognizes that
string has a valid date it can it’s able
to convert that date to an actual moment
object that’s why we get value set to
true okay now here basically the idea is
we do not want to call that method so we
do not want to update the value of the
next state on the state we don’t
actually want to invoke this method if
the value of the date is invalid and
that’s why we have the valid property
here on this date okay so what we could
do is here we could say if this state
valid is not true so let’s negate it or
actually let’s actually say if it’s
valid then you want to call that method
okay else let’s just do console.log
invalid just to make this clear for this
concept and let’s actually save it and
let’s go back so if I thank gibberish we
and let’s click on reset okay it’s going
to give us invalid if we do it’s a 20-19
you click on reset and it updates the
values here we let’s do something
different let’s do say 20 2005 12 for
example as you can see that’s this is a
valid date that’s why it updates the
timer and the one thing I notice here is
we still have the title of New Year
let’s actually go back and update
it for a second here let’s actually do
this so we because we have the next date
on the state let’s do structure it all
so let’s get its value here in the
render method let’s actually replace New
Year with that value no of course this
is an object if you save it like that
it’s going to fail it can’t you know we
can’t put it can’t call to a string on
this object and you need to be explicit
so you need to call either to show
yourself or there’s also to locale
string on that data object when a moment
object this is going to give us some
value like this one of course it’s not
readable for humans it’s not very
flexible one thing you could do is if
you were to go to moment documentation
so let’s do moment GS we’re going to go
to the docs and if you search for
calendar there is a special method that
allows you to get the calendar time on
any moment instance so for example we
have a moment here this is basically an
instance of the moment object right
whenever you call calendar on it
you could either pass a reference time
but if you don’t pass it it’s going to
be it’s going to default to the value of
now to the date of now and then it’s
gonna give you a formatted string that
looks something like this so for example
last Monday at 2:30 a.m. or you know
7/10 fledge 2011 so it’s going to
convert that moment instance that date
and it’s going to give you a calendar
value so something that’s readable for
humans and this is exactly what we want
so if I were to call calendar on that
next date object I’m going to get
something that looks like this okay so
this is Jerry first of 2019 so this is
new year but if I were to type let’s say
20 let’s say 20 19 May 31st and I click
on reset it’s going to give me that
value but as you can see here it’s quite
flexible so if I tried something like
say tomorrow this would be 2018 okay the
first January let’s do 21st
let’s do 12:15 p.m.
okay so noon it’s gonna give me tomorrow
at that time so which I think it’s
pretty flexible let’s go back to the
date picker I’m going to remove the else
condition the other trick I’ll do here
first of all we are already accessing
properties on the state twice so I’m
actually going to structure them with as
destructuring syntax here so I’m going
to have a valid property and I’m also
going to have a date and we’re going to
extract them from the state so again
this was just a sixth syntax if you’re
not sure how this works just go back to
es6 series i’ve done a bunch of
tutorials from that just go back and
view those videos if you’re not
comfortable using that syntax but what
I’m going to do here is I’m actually
going to the following let’s do valid
and if it’s valid we’re going to call
that method and of course let’s remove
the state reference there because we
already have the date how does this
syntax work okay so this is not this has
nothing to do necessarily with react we
a six or anything of that nature
this is actually a feature that’s been
in JavaScript forever okay so the way
this works is you have an expression
here you have a logical comparison so
I’m saying if it’s valid valid is a
variable and again it’s being extracted
from the state so if this is true okay
if this is true we want to execute this
function or expression or it could be
anything it could be a value to be a
boolean or it could be you know in this
case it could be false if it’s false and
then the whole expression would be false
but it could also be able to take an
assignment a variable assignment or it
could be an expression or could be a
function call in this case we want to
call on date reset this function will
only fire if valid is true so if I were
to say false by default this will always
be false and the function on date we
said will never
if I say true it will always execute
okay but in this case you want to rely
on the value of valid if it’s valid
execute the function otherwise don’t
execute it this will be false in the
second the second argument will also
will not will be disregarded because
this is how logical operations work if
the first argument is let’s say false
and the logical operator is and you’re
not going to look at the second one
because the condition would anyways be
false because the first one is false but
if the first one is true you’re gonna
look at the second one now in this case
it’s actually going to execute the
second one because it’s a function call
so hope that makes sense and if you’re
not sure about this syntax it’s actually
quite it’s used quite often in react so
you could just you know either look it
up look up the and logical operator just
google it and you’ll see a bunch of
different references on how to use this
like I said this has nothing to do with
react where your six is just a feature
in JavaScript so this was just a bit of
a side note for you and I hope that
makes sense if we save it just to prove
you that this actually works let’s do
the data again tomorrow I’m not being
very creative here but it’s 2:12 p.m.
would click on reset it’s a valid date
so the form gets submitted and we
actually update the state but if I type
gibberish I click reset before we would
get an error we would get an error in
the console and also we would get non
values in the timer everything would
break but for now because we have
validation in place when I click reset
we don’t get any problems it actually
doesn’t crash – yep because that never
gets called okay because the valid is
false the other condition I also want to
add is we want to check that the date is
actually something in the future because
if I were to type let’s say something in
the past let’s say 2018 2016 or 101 we
get negative values and that’s not cool
because and of course as you can see it
actually increments so it’s completely
broken it’s not it this needs to be
actually fixed so we need to make sure
that the date that you enter is also a
date in the future
otherwise it doesn’t make sense to copy
the difference the difference only makes
sense when every other a date that’s in
the future so I’m going to add another
condition here we’re gonna call is after
I believe actually ins check the dogs
off the top of my head I can’t actually
call yeah I think it’s cool is after and
you call that on any moment instance and
then you pass another instance to it in
this case I would just pass a moment so
again what this is gonna do is we have a
date we have an actual moment instance
because we call the moment constructor
or function when you call is after it’s
going to check that that instance of
that date is actually after given
another date in this case we’re passing
another moment instance and like I said
before it’s going to default to the
present date the current date because
you’re not passing anything to the
constructor has an argument so it’s
going to be the date of now okay
you could also pass new date by the way
this is also going to work I’m just
going to stick to a moment just for
consistency but again nothing wrong with
it you could pass a new date you could
use a built-in date object in JavaScript
as well okay and let’s save that if I go
back to the earth if I were to type
something in the past and I get our if I
were to click reset as you can see
because it’s not valid the form gets
submitted but we’re not calling the
method on the on the parent component
right so it’s not actually updating the
state of the brain component if I type
something in the future this is a valid
date and it’s going to be updated again
let’s do maybe June we set the date gets
reset okay and just like before
everything else is also functional if
you were to click pause it’s gonna pause
the timer if you resumed it’s going to
resume the timer it’s going to
recalculate the difference again and we
render the timer update all the values
everything is going to be working just
fine just like before so all the functionality is the same otherwise
forms let’s move on to validation now so
what the validation the idea basically
here is whenever you type something of
course if it’s gibberish and then click
on reset you see that the logic is going
to break here we get Nats this is
because I didn’t type an actual value an
actual valid date and when we call the
moment wrapper a moment function on it
it was not able to convert that string
to an actual date so we need to provide
some kind of validation here let’s add a
new property on the state in this
property you’re going to be called valid
by default we’re gonna say that it’s
true now here we have the event object
but of course we can also use the
structuring so we don’t actually need
the whole event object and we don’t
actually need the target sub object of
that event object we can actually
destructure it so we need to get access
to the target okay but specifically we
need to extract the value from that
target so I’m going to use deep
destruction here this will basically
allow us to access the value from that
object whenever I use the two curly
braces we are going to end up the
variable that we end up in the end is
actually value so we don’t care about
the target just give me the value and
let’s do console.log of that value and
we’re gonna set that value on the date
okay let’s save that let’s type
something out and as you can see here it
updates to sticked it the the value that
we get is basically going to be the
value of target on the event object so
just a bit of restructuring for you
there next so here basically we want to
validate the value that you typed so we
want to also update the valid property
now the one thing we could do is let’s
say and we were to add constant date and
we’re going to just wrap it into the
moment call and this is going to convert
the value to a moment object and of
course they will not necessarily be
valid
that’s what we have to valid property so
we’re going to call a few methods here
so we could do date is valid when you
call that method any moment object it’s
going to give you other true or false
it’s going to be true if it’s actually a
property like a proper date let’s save
it and let’s actually check in the
browser it’s gonna open the react dev
tools let’s go to the input so we have
the input here we have the date picker
it’s valid by default so the valid
property on this date is true if I type
gibberish it’s going to be false but if
I try it if I type something valid let’s
say 2018 that’s a valid date for a
moment moment actually recognizes that
string has a valid date it can it’s able
to convert that date to an actual moment
object that’s why we get value set to
true okay now here basically the idea is
we do not want to call that method so we
do not want to update the value of the
next state on the state we don’t
actually want to invoke this method if
the value of the date is invalid and
that’s why we have the valid property
here on this date okay so what we could
do is here we could say if this state
valid is not true so let’s negate it or
actually let’s actually say if it’s
valid then you want to call that method
okay else let’s just do console.log
invalid just to make this clear for this
concept and let’s actually save it and
let’s go back so if I thank gibberish we
and let’s click on reset okay it’s going
to give us invalid if we do it’s a 20-19
you click on reset and it updates the
values here we let’s do something
different let’s do say 20 2005 12 for
example as you can see that’s this is a
valid date that’s why it updates the
timer and the one thing I notice here is
we still have the title of New Year
let’s actually go back and update
it for a second here let’s actually do
this so we because we have the next date
on the state let’s do structure it all
so let’s get its value here in the
render method let’s actually replace New
Year with that value no of course this
is an object if you save it like that
it’s going to fail it can’t you know we
can’t put it can’t call to a string on
this object and you need to be explicit
so you need to call either to show
yourself or there’s also to locale
string on that data object when a moment
object this is going to give us some
value like this one of course it’s not
readable for humans it’s not very
flexible one thing you could do is if
you were to go to moment documentation
so let’s do moment GS we’re going to go
to the docs and if you search for
calendar there is a special method that
allows you to get the calendar time on
any moment instance so for example we
have a moment here this is basically an
instance of the moment object right
whenever you call calendar on it
you could either pass a reference time
but if you don’t pass it it’s going to
be it’s going to default to the value of
now to the date of now and then it’s
gonna give you a formatted string that
looks something like this so for example
last Monday at 2:30 a.m. or you know
7/10 fledge 2011 so it’s going to
convert that moment instance that date
and it’s going to give you a calendar
value so something that’s readable for
humans and this is exactly what we want
so if I were to call calendar on that
next date object I’m going to get
something that looks like this okay so
this is Jerry first of 2019 so this is
new year but if I were to type let’s say
20 let’s say 20 19 May 31st and I click
on reset it’s going to give me that
value but as you can see here it’s quite
flexible so if I tried something like
say tomorrow this would be 2018 okay the
first January let’s do 21st
let’s do 12:15 p.m.
okay so noon it’s gonna give me tomorrow
at that time so which I think it’s
pretty flexible let’s go back to the
date picker I’m going to remove the else
condition the other trick I’ll do here
first of all we are already accessing
properties on the state twice so I’m
actually going to structure them with as
destructuring syntax here so I’m going
to have a valid property and I’m also
going to have a date and we’re going to
extract them from the state so again
this was just a sixth syntax if you’re
not sure how this works just go back to
es6 series i’ve done a bunch of
tutorials from that just go back and
view those videos if you’re not
comfortable using that syntax but what
I’m going to do here is I’m actually
going to the following let’s do valid
and if it’s valid we’re going to call
that method and of course let’s remove
the state reference there because we
already have the date how does this
syntax work okay so this is not this has
nothing to do necessarily with react we
a six or anything of that nature
this is actually a feature that’s been
in JavaScript forever okay so the way
this works is you have an expression
here you have a logical comparison so
I’m saying if it’s valid valid is a
variable and again it’s being extracted
from the state so if this is true okay
if this is true we want to execute this
function or expression or it could be
anything it could be a value to be a
boolean or it could be you know in this
case it could be false if it’s false and
then the whole expression would be false
but it could also be able to take an
assignment a variable assignment or it
could be an expression or could be a
function call in this case we want to
call on date reset this function will
only fire if valid is true so if I were
to say false by default this will always
be false and the function on date we
said will never
if I say true it will always execute
okay but in this case you want to rely
on the value of valid if it’s valid
execute the function otherwise don’t
execute it this will be false in the
second the second argument will also
will not will be disregarded because
this is how logical operations work if
the first argument is let’s say false
and the logical operator is and you’re
not going to look at the second one
because the condition would anyways be
false because the first one is false but
if the first one is true you’re gonna
look at the second one now in this case
it’s actually going to execute the
second one because it’s a function call
so hope that makes sense and if you’re
not sure about this syntax it’s actually
quite it’s used quite often in react so
you could just you know either look it
up look up the and logical operator just
google it and you’ll see a bunch of
different references on how to use this
like I said this has nothing to do with
react where your six is just a feature
in JavaScript so this was just a bit of
a side note for you and I hope that
makes sense if we save it just to prove
you that this actually works let’s do
the data again tomorrow I’m not being
very creative here but it’s 2:12 p.m.
would click on reset it’s a valid date
so the form gets submitted and we
actually update the state but if I type
gibberish I click reset before we would
get an error we would get an error in
the console and also we would get non
values in the timer everything would
break but for now because we have
validation in place when I click reset
we don’t get any problems it actually
doesn’t crash – yep because that never
gets called okay because the valid is
false the other condition I also want to
add is we want to check that the date is
actually something in the future because
if I were to type let’s say something in
the past let’s say 2018 2016 or 101 we
get negative values and that’s not cool
because and of course as you can see it
actually increments so it’s completely
broken it’s not it this needs to be
actually fixed so we need to make sure
that the date that you enter is also a
date in the future
otherwise it doesn’t make sense to copy
the difference the difference only makes
sense when every other a date that’s in
the future so I’m going to add another
condition here we’re gonna call is after
I believe actually ins check the dogs
off the top of my head I can’t actually
call yeah I think it’s cool is after and
you call that on any moment instance and
then you pass another instance to it in
this case I would just pass a moment so
again what this is gonna do is we have a
date we have an actual moment instance
because we call the moment constructor
or function when you call is after it’s
going to check that that instance of
that date is actually after given
another date in this case we’re passing
another moment instance and like I said
before it’s going to default to the
present date the current date because
you’re not passing anything to the
constructor has an argument so it’s
going to be the date of now okay
you could also pass new date by the way
this is also going to work I’m just
going to stick to a moment just for
consistency but again nothing wrong with
it you could pass a new date you could
use a built-in date object in JavaScript
as well okay and let’s save that if I go
back to the earth if I were to type
something in the past and I get our if I
were to click reset as you can see
because it’s not valid the form gets
submitted but we’re not calling the
method on the on the parent component
right so it’s not actually updating the
state of the brain component if I type
something in the future this is a valid
date and it’s going to be updated again
let’s do maybe June we set the date gets
reset okay and just like before
everything else is also functional if
you were to click pause it’s gonna pause
the timer if you resumed it’s going to
resume the timer it’s going to
recalculate the difference again and we
render the timer update all the values
everything is going to be working just
fine just like before so all the functionality is the same otherwise
Please follow and like us: