all right so this works just fine but of
course we need to set an interval and we
need this interval to basically update
the duration first on every tick on
every second basically and we can
already find the example of how to do
this on the react Jo Stoddart websites
on the official documentation website so
you can see here that we’ve got a very
similar example where basically
calculates the number of seconds that
has passed once you basically enter the
webpage so in this example they have a
constructor where they set a state with
the number of seconds then on every
single tick they basically make a call
to the set state method so the set
statement that is basically going to
update the state of the component and
then they basically incrementing number
of seconds by one and lastly so what
happens here as you can see they use two
special methods like I mentioned before
class-based components are different
from functional basic opponents and then
they also allow you to have not only
state but also lifecycle hooks or
methods so in this case one of the
methods they use is component dead mount
so this method is basically going to
fire once the component dead get mounted
to the dom so once it’s received all the
props and once the state got initialized
this method is going to fire so in there
they basically have a property assigned
to the class but this is basically going
to be an interval and it’s going to be a
function that’s basically going to run
every second and it’s going to call a
tick method and the tick method is
basically going to just update a state
it’s going to increment the number of
seconds by one right and then they also
had component will unmount so this
method is going to be called before the
component gets unmounted from the top
and one of the use cases for this is
let’s say in a parent component you
might have with a button that hi that
shows each child component so if you
click the button to hide the component
that component is going to be unmounted
from the down and this is when the
method is going to be triggered of
course there’s multiple scenarios in
which this could happen but that’s just
one of them and what they want to do is
they want to clear the interval and that
makes a lot of sense right because you
want to clear or just remove
the inset interval call or hook then
basically execute every second because
if you don’t have the component anymore
it doesn’t make sense to continue
calling the tech method it’s just going
to break your code so we’re gonna do a
similar thing in our application here so
I will do the following so let’s do
component dead amount so that’s gonna be
the hook and I guess I’m just gonna do
the very same thing I’m going to accept
an interval which is going to be a call
to set interval function I’ll use an
arrow function as well and in there
we’re basically going to do this set
state and it will provide a new object
here with the duration and this is
basically going to be the same call to
get remaining time method that we create
it and then let’s set this to one second
this is basically 1000 milliseconds or
just one second and this should already
work should basically update you as you
can see here every second this hope that
we created right the anonymous function
that basically sets the state basically
updates the state with a new duration in
this case it’s going to calculate the
date of now and it’s going to calculate
the data of the New Year Europe now plus
one and it’s gonna calculate difference
and then basically it’s going to give
you back the duration object which is a
special built in object in lo and GS and
then when that’s done is basically going
to set that to a duration property on
the state and that property is going to
overwrite the existing duration property
and that’s how a state gets updated and
basically that happens every second and
that’s why it updates on every second so
it’s gonna update the number of seconds
minutes hours and days messes how the
countdown timer is gonna work and of
course we can’t forget to add another
one so it’s do component will and well
this is gonna be called just before the
component gets unmounted
and we want to call clear interval and
we’re going to pass this interval in
there this integral basically is going
to store an ID of the set interval
function and once we call a clear
interval method it’s basically going to
destroy that controls so that it doesn’t
continue to execute once the component was destroyed or unmounted
course we need to set an interval and we
need this interval to basically update
the duration first on every tick on
every second basically and we can
already find the example of how to do
this on the react Jo Stoddart websites
on the official documentation website so
you can see here that we’ve got a very
similar example where basically
calculates the number of seconds that
has passed once you basically enter the
webpage so in this example they have a
constructor where they set a state with
the number of seconds then on every
single tick they basically make a call
to the set state method so the set
statement that is basically going to
update the state of the component and
then they basically incrementing number
of seconds by one and lastly so what
happens here as you can see they use two
special methods like I mentioned before
class-based components are different
from functional basic opponents and then
they also allow you to have not only
state but also lifecycle hooks or
methods so in this case one of the
methods they use is component dead mount
so this method is basically going to
fire once the component dead get mounted
to the dom so once it’s received all the
props and once the state got initialized
this method is going to fire so in there
they basically have a property assigned
to the class but this is basically going
to be an interval and it’s going to be a
function that’s basically going to run
every second and it’s going to call a
tick method and the tick method is
basically going to just update a state
it’s going to increment the number of
seconds by one right and then they also
had component will unmount so this
method is going to be called before the
component gets unmounted from the top
and one of the use cases for this is
let’s say in a parent component you
might have with a button that hi that
shows each child component so if you
click the button to hide the component
that component is going to be unmounted
from the down and this is when the
method is going to be triggered of
course there’s multiple scenarios in
which this could happen but that’s just
one of them and what they want to do is
they want to clear the interval and that
makes a lot of sense right because you
want to clear or just remove
the inset interval call or hook then
basically execute every second because
if you don’t have the component anymore
it doesn’t make sense to continue
calling the tech method it’s just going
to break your code so we’re gonna do a
similar thing in our application here so
I will do the following so let’s do
component dead amount so that’s gonna be
the hook and I guess I’m just gonna do
the very same thing I’m going to accept
an interval which is going to be a call
to set interval function I’ll use an
arrow function as well and in there
we’re basically going to do this set
state and it will provide a new object
here with the duration and this is
basically going to be the same call to
get remaining time method that we create
it and then let’s set this to one second
this is basically 1000 milliseconds or
just one second and this should already
work should basically update you as you
can see here every second this hope that
we created right the anonymous function
that basically sets the state basically
updates the state with a new duration in
this case it’s going to calculate the
date of now and it’s going to calculate
the data of the New Year Europe now plus
one and it’s gonna calculate difference
and then basically it’s going to give
you back the duration object which is a
special built in object in lo and GS and
then when that’s done is basically going
to set that to a duration property on
the state and that property is going to
overwrite the existing duration property
and that’s how a state gets updated and
basically that happens every second and
that’s why it updates on every second so
it’s gonna update the number of seconds
minutes hours and days messes how the
countdown timer is gonna work and of
course we can’t forget to add another
one so it’s do component will and well
this is gonna be called just before the
component gets unmounted
and we want to call clear interval and
we’re going to pass this interval in
there this integral basically is going
to store an ID of the set interval
function and once we call a clear
interval method it’s basically going to
destroy that controls so that it doesn’t
continue to execute once the component was destroyed or unmounted
Please follow and like us: