now eventually gets you handling the
form so in this scenario we want to be
able to type into the form and we want
to be able to click on the button and
then we set the timer so at this moment
if you were trying to type something
it’s going to work but it’s actually not
being stored anywhere so one way to
solve this problem because the value
that you type to the input the time
being is stored anywhere and we don’t
really have access to it unless you
resort to accessing actual Dom elements
and retrieving the value from there now
this is not really preferable it’s
really mixing vanilla JavaScript and
react we want to be following the react
guidelines so one of the ways to
approach this problem would be to create
a state now of course when it comes to
state state is a property was it or
characteristic of stateful components
and we have a functional component and
like I said it’s fine it’s always good
to begin with functional components it’s
alright if you want to convert them to
class-based components and that’s
exactly what I’m going to do so let’s
convert datepicker
to a class and it’s going to extend
component ok which is gonna import it in
a second let’s do a name import
component and we’re gonna need a render
method as always the render method
basically returns a react elements
that’s going to be a representation of
the Dom node that needs to be mounted to
the actual Dom okay and also let’s bring
the default export to the same line with
a class that’s just gonna save a little
bit of space and move the date picker
from there and let’s save it this should
work just fine component is not defined
did I make it typo
let’s see yes I didn’t make a typo let’s
save it again let’s go back and this is
still functional no error so far this is
perfect next like I said we want to have
state here in this component now of
course you could do a structure as you
would typically do
and you would also need to pass the
props to the super or the bear
infrastructure you need to use the super
keyword and lastly after that you could
do this state and you can have your
state object this is fine but I prefer
to use the iya seven class prop eight
because it’s just gonna save us a little
bit of space a little bit of typing as
well and I think it just looks neater
but in this case let’s do the following
let’s remove the state from the
constructor let’s just add a state
property on the class behind the scenes
like I mentioned before this is going to
be converted to a constructor called
so in this case let’s do a date and
we’re gonna set it to an empty shrink
for now basically this date is going to
be a string representation of the date
that you type into the input okay so if
I type something with a 20 1801 it’s
2:00 tomorrow 21 today is January 20th
okay
so a valid value is going to be stored
inside of the state and we’ll have
access to that value and we’ll be able
to manipulate that value as well next
let’s bind that value to the input okay
so the way you do this is every input
will have a value property so one thing
we could do is let’s say we want to
extract that date from the state let’s
use the structure in here I’m gonna do
date give me the date from this state
and of course you could do you know if
we’re the value could do this state date
that’s fine but I think we’re gonna need
to extract some other properties as well
in the immediate future so I’m just
gonna use that form of the destructuring
and besides it also looks cool and use
those es6 features so I’ll keep using
that so let’s put the date as the value
okay so for now there’s nothing in there
but let’s see if we had it a value of
let’s say tomorrow I say that this value
is going to be in the input box now of
course we get a warning that says
there’s no on change handler there’s no
on change event listener we’re gonna add
it if you
so that the warning will be removed so
the next thing we’d like to do is of
course for now if you type something to
the input at this point we can’t really
type anything to the input before we
could do that because the input was not
bound to anything you were typing to the
input and it wasn’t updating anything or
sending anything to the state but now we
actually have a state property right
that’s a date and we actually want it to
be nothing but a fault so it’s gonna be
an empty string but for now if you type
something it’s not going to be updated
anywhere and it’s not going to be saved
in the state and to fix that we
obviously need a handler so whenever you
type to the input box you want to update
the state on every character that you
type down when every key that you press
on the keyboard you want that change to
be affected on the state also so we’re
going to need to create an event
listener the way you would do it with
react is of course you would use inline
attributes in this case we need to have
on change and learn like you saw in the
dev tools the warning that we got it was
talking about the on change handler so
in this case let’s actually call a local
method let’s do this handle date change
and we need to create that method also
so let’s do exactly that
let’s do console.log the the thing is
when this method executes or is being
invoked it’s also going to receive a
special argument that’s known as the
event object and what’s actually
console.log that object so you can see
what’s going on let’s do let’s type
something okay whenever I press on the
you know keyboard buttons whenever I
type something to the input box you’re
gonna see an object here this is
basically the event object one of the
things that it contains is the target
and the target would be the input box
and one of the other values that you’re
gonna get one of the other properties
you’re gonna get on the target object is
value now let’s cancel out that value so
let’s do target value okay
let’s type something down let’s do two
zero one eight twenty eighteen as you
can see in the output here it basically
gives us back the values that we typed
every time I type something it’s gonna
give me a new object but represents the
event that happened they change the
event because the input changed the
value of the input changed so in this
case we get the event object and we were
able to access the value on it so in
this case what we want to do is we want
to update this states so let’s do let’s
set state we’re gonna provide a new
object and we want to update the date
okay and one thing we can do is we could
actually update the date property to the
value of the target now this is going to
be the new value that you just typed to
the input box so let’s type something
out and we get an error that says you
cannot read property set state undefined
and we’ve seen this behavior before this
is happening because the component would
the value of the dis object inside the
component is not bound to the function
of handle date change now one thing we
could do is of course if you go back to
the constructor you could do inside of
the constructor you could do handle they
change equals handle date changed and
then call the bind method with this
keyword right so you would do something
like this inside of the constructor you
would do this method equals this same
method but you would bind to this
keyword to it this is a perfectly fine
solution I’m going to stick to class
properties with the es7 syntax because
we’ve already used them here with the
states so I’m going to convert this to a
property and the property would be an
error function an anonymous function and
as you know what error functions the
error functions actually preserve the
context of this keyword so in this key
in this case the rest keyword would have
the same value as it has inside of the
render method right before it was a
normal function a traditional function
behind the scenes and it was actually
losing the context of the this keyword
and because the strict mode is enabled
by default we’ll this web pack and bowel
setup the value of this inside of
handled a change was undefined and we
want the value of this obviously to be
the value of the component so that we
can call let’s let’s say set state on it
so we can use the es7 syntax to have an
error function the our function will
keep the context of this keyword and
we’re able to call set state inside of
that method so let’s try typing
something again there’s no error so far
and of course you’re not seeing anything
but behind the scenes if you were to
open and react tools let’s go inspect
this component especially yeah let’s try
inspected there we go here’s the input
here’s a date picker and we have a state
that contains that value if I were to
change it let’s say instead of 2821 you
see that the value updates okay and this
is happening because of the set state
method back in here okay
hope that makes sense ok next we’re
setting the state here but of course
whenever you actually submit the form
whenever you click the button you want
to be able to grab that value of the
date and you want to be able to pass it
back to index GS back to the countdown
component instead of the countdown
component we want to grab that date and
we want to basically inject it to the
state now we’re gonna refactor this
quite a bit but for now let’s just
finish the date picker so what I want to
be able to do here is whenever you click
the button this is going to trigger a
submit event in fact you could have type
submit’ on the button and this is
optional if you don’t include any type
it’s going to be submit by default
another type is type button and if you
have that type whenever you click on the
button as you can see there’s no page
refresh but if you were to put submit
right and if you were to click on a
button it’s gonna do a page refresh no
that’s not something that is desirable
in fact if you remove the type itself
it’s going to be like I said submit by
default the page refresh is still going
to happen we basically want to get rid
of that now in this case what I’m gonna
do is I’m going to use another
lacera and the civil listener would be
on the form element right and the event
listener is on submit okay so we’re
gonna add a new method as well let’s do
this handle date submit let’s have a new
method here okay and because this is
going to be a traditional function
behind the scenes we’re not going to be
able to have access to this keyword so
I’ll just transform this to an arrow
function this is going to be using the D
s7 class properties as we talked about
just a few moments ago and so here let’s
do consul off this state date so when
you submit the form we were just gonna
consul of the state and like I said we
also want to prevent the page refresh
here because if I were to click on reset
and even though you click on reset you
because of the page refresh we don’t
actually see anything in the console so
one thing you could do to fix that is
again we might have our event object
here and in this case we want to prevent
default this is basically going to
prevent the default behavior of
submitting the form and then basically
refreshing the page so if you do that
that’s basically going to prevent the
default behavior and if you save it we
also have the date from the state and
this should be able to console out the
states to the browser so let’s do 2018
or 121 tomorrow what do we set and as
you can see here we get the value of the
date and the page doesn’t get refreshed
so the state is going to be the state is
going to remain the same previously
because of the page refresh we were
losing all of the state in the
application we had to recreate the whole
application we mounted to the DOM and
the state was lost like I said so in
this case no page refresh the state is
saved and we can continue working with a form
form so in this scenario we want to be
able to type into the form and we want
to be able to click on the button and
then we set the timer so at this moment
if you were trying to type something
it’s going to work but it’s actually not
being stored anywhere so one way to
solve this problem because the value
that you type to the input the time
being is stored anywhere and we don’t
really have access to it unless you
resort to accessing actual Dom elements
and retrieving the value from there now
this is not really preferable it’s
really mixing vanilla JavaScript and
react we want to be following the react
guidelines so one of the ways to
approach this problem would be to create
a state now of course when it comes to
state state is a property was it or
characteristic of stateful components
and we have a functional component and
like I said it’s fine it’s always good
to begin with functional components it’s
alright if you want to convert them to
class-based components and that’s
exactly what I’m going to do so let’s
convert datepicker
to a class and it’s going to extend
component ok which is gonna import it in
a second let’s do a name import
component and we’re gonna need a render
method as always the render method
basically returns a react elements
that’s going to be a representation of
the Dom node that needs to be mounted to
the actual Dom okay and also let’s bring
the default export to the same line with
a class that’s just gonna save a little
bit of space and move the date picker
from there and let’s save it this should
work just fine component is not defined
did I make it typo
let’s see yes I didn’t make a typo let’s
save it again let’s go back and this is
still functional no error so far this is
perfect next like I said we want to have
state here in this component now of
course you could do a structure as you
would typically do
and you would also need to pass the
props to the super or the bear
infrastructure you need to use the super
keyword and lastly after that you could
do this state and you can have your
state object this is fine but I prefer
to use the iya seven class prop eight
because it’s just gonna save us a little
bit of space a little bit of typing as
well and I think it just looks neater
but in this case let’s do the following
let’s remove the state from the
constructor let’s just add a state
property on the class behind the scenes
like I mentioned before this is going to
be converted to a constructor called
so in this case let’s do a date and
we’re gonna set it to an empty shrink
for now basically this date is going to
be a string representation of the date
that you type into the input okay so if
I type something with a 20 1801 it’s
2:00 tomorrow 21 today is January 20th
okay
so a valid value is going to be stored
inside of the state and we’ll have
access to that value and we’ll be able
to manipulate that value as well next
let’s bind that value to the input okay
so the way you do this is every input
will have a value property so one thing
we could do is let’s say we want to
extract that date from the state let’s
use the structure in here I’m gonna do
date give me the date from this state
and of course you could do you know if
we’re the value could do this state date
that’s fine but I think we’re gonna need
to extract some other properties as well
in the immediate future so I’m just
gonna use that form of the destructuring
and besides it also looks cool and use
those es6 features so I’ll keep using
that so let’s put the date as the value
okay so for now there’s nothing in there
but let’s see if we had it a value of
let’s say tomorrow I say that this value
is going to be in the input box now of
course we get a warning that says
there’s no on change handler there’s no
on change event listener we’re gonna add
it if you
so that the warning will be removed so
the next thing we’d like to do is of
course for now if you type something to
the input at this point we can’t really
type anything to the input before we
could do that because the input was not
bound to anything you were typing to the
input and it wasn’t updating anything or
sending anything to the state but now we
actually have a state property right
that’s a date and we actually want it to
be nothing but a fault so it’s gonna be
an empty string but for now if you type
something it’s not going to be updated
anywhere and it’s not going to be saved
in the state and to fix that we
obviously need a handler so whenever you
type to the input box you want to update
the state on every character that you
type down when every key that you press
on the keyboard you want that change to
be affected on the state also so we’re
going to need to create an event
listener the way you would do it with
react is of course you would use inline
attributes in this case we need to have
on change and learn like you saw in the
dev tools the warning that we got it was
talking about the on change handler so
in this case let’s actually call a local
method let’s do this handle date change
and we need to create that method also
so let’s do exactly that
let’s do console.log the the thing is
when this method executes or is being
invoked it’s also going to receive a
special argument that’s known as the
event object and what’s actually
console.log that object so you can see
what’s going on let’s do let’s type
something okay whenever I press on the
you know keyboard buttons whenever I
type something to the input box you’re
gonna see an object here this is
basically the event object one of the
things that it contains is the target
and the target would be the input box
and one of the other values that you’re
gonna get one of the other properties
you’re gonna get on the target object is
value now let’s cancel out that value so
let’s do target value okay
let’s type something down let’s do two
zero one eight twenty eighteen as you
can see in the output here it basically
gives us back the values that we typed
every time I type something it’s gonna
give me a new object but represents the
event that happened they change the
event because the input changed the
value of the input changed so in this
case we get the event object and we were
able to access the value on it so in
this case what we want to do is we want
to update this states so let’s do let’s
set state we’re gonna provide a new
object and we want to update the date
okay and one thing we can do is we could
actually update the date property to the
value of the target now this is going to
be the new value that you just typed to
the input box so let’s type something
out and we get an error that says you
cannot read property set state undefined
and we’ve seen this behavior before this
is happening because the component would
the value of the dis object inside the
component is not bound to the function
of handle date change now one thing we
could do is of course if you go back to
the constructor you could do inside of
the constructor you could do handle they
change equals handle date changed and
then call the bind method with this
keyword right so you would do something
like this inside of the constructor you
would do this method equals this same
method but you would bind to this
keyword to it this is a perfectly fine
solution I’m going to stick to class
properties with the es7 syntax because
we’ve already used them here with the
states so I’m going to convert this to a
property and the property would be an
error function an anonymous function and
as you know what error functions the
error functions actually preserve the
context of this keyword so in this key
in this case the rest keyword would have
the same value as it has inside of the
render method right before it was a
normal function a traditional function
behind the scenes and it was actually
losing the context of the this keyword
and because the strict mode is enabled
by default we’ll this web pack and bowel
setup the value of this inside of
handled a change was undefined and we
want the value of this obviously to be
the value of the component so that we
can call let’s let’s say set state on it
so we can use the es7 syntax to have an
error function the our function will
keep the context of this keyword and
we’re able to call set state inside of
that method so let’s try typing
something again there’s no error so far
and of course you’re not seeing anything
but behind the scenes if you were to
open and react tools let’s go inspect
this component especially yeah let’s try
inspected there we go here’s the input
here’s a date picker and we have a state
that contains that value if I were to
change it let’s say instead of 2821 you
see that the value updates okay and this
is happening because of the set state
method back in here okay
hope that makes sense ok next we’re
setting the state here but of course
whenever you actually submit the form
whenever you click the button you want
to be able to grab that value of the
date and you want to be able to pass it
back to index GS back to the countdown
component instead of the countdown
component we want to grab that date and
we want to basically inject it to the
state now we’re gonna refactor this
quite a bit but for now let’s just
finish the date picker so what I want to
be able to do here is whenever you click
the button this is going to trigger a
submit event in fact you could have type
submit’ on the button and this is
optional if you don’t include any type
it’s going to be submit by default
another type is type button and if you
have that type whenever you click on the
button as you can see there’s no page
refresh but if you were to put submit
right and if you were to click on a
button it’s gonna do a page refresh no
that’s not something that is desirable
in fact if you remove the type itself
it’s going to be like I said submit by
default the page refresh is still going
to happen we basically want to get rid
of that now in this case what I’m gonna
do is I’m going to use another
lacera and the civil listener would be
on the form element right and the event
listener is on submit okay so we’re
gonna add a new method as well let’s do
this handle date submit let’s have a new
method here okay and because this is
going to be a traditional function
behind the scenes we’re not going to be
able to have access to this keyword so
I’ll just transform this to an arrow
function this is going to be using the D
s7 class properties as we talked about
just a few moments ago and so here let’s
do consul off this state date so when
you submit the form we were just gonna
consul of the state and like I said we
also want to prevent the page refresh
here because if I were to click on reset
and even though you click on reset you
because of the page refresh we don’t
actually see anything in the console so
one thing you could do to fix that is
again we might have our event object
here and in this case we want to prevent
default this is basically going to
prevent the default behavior of
submitting the form and then basically
refreshing the page so if you do that
that’s basically going to prevent the
default behavior and if you save it we
also have the date from the state and
this should be able to console out the
states to the browser so let’s do 2018
or 121 tomorrow what do we set and as
you can see here we get the value of the
date and the page doesn’t get refreshed
so the state is going to be the state is
going to remain the same previously
because of the page refresh we were
losing all of the state in the
application we had to recreate the whole
application we mounted to the DOM and
the state was lost like I said so in
this case no page refresh the state is
saved and we can continue working with a form
Please follow and like us: