now the one problem here though is let’s
say I click on another exercise I want
to add it dips I click on the icon but
it doesn’t actually update the form so
what’s going on here now if you go to
form what we basically did here is set
the initial state based on the props and
really it’s actually an anti-pattern in
most cases because by doing that you are
basically shooting yourself in the foot
whenever the properties on the state so
on the application state change so for
instance in this case the exercise is
actually being updated whenever I click
on another exercise so in this case the
selected exercises bench-pressed
behind the scenes but it’s not updating
this state on the form because the state
is static it’s not synced up to the
props it’s only being initialized once
when you’re calling get in that state
method so when the form actually mounts
now to find more information about this
let’s actually head over to react.js
world and just to make this clear let’s
go to dogs let’s go to reference if you
click on react component you scroll down
you’re gonna find a section for the
constructor and you’re gonna see exactly
what I’m talking about when they
describe the pattern that we’re actually
using for our form so setting the states
based on the props well like I said it’s
an anti-pattern but in rare cases it
could actually be useful the reason it’s
useful for us is because we’re actually
using a controlled component so this
form component maintains its own state
because I don’t really want to update
the title when you type into it right
because imagine we’ll have an API call
that’s initiating a put request to the
server well what’s going to happen if I
actually maintain the state outside the
form do we want to send the put request
on every T stroke well that’s not very
efficient so we can keep the state
inside the form so you can add at the
fields as you want it’s actually not
going to update anything on the Left
pane as long as you don’t click only
create well in this case we’re gonna
change it to edit but as long as you
don’t click on the button these
that button that is okay so in this case
going back to the dogs what they suggest
doing is well if you do want to use this
battery be careful of course because in
most cases it’s easier to lift up the
states to the parent but in this case we
actually have a controlled component a
form that maintains its own state like I
said so to make it work in the end what
we need to do is we actually need to add
this component will receive props life
cycle method and inside of it we can
actually get the next props and we can
actually update the states based on
those props so what I’m gonna do here is
I’m actually going to create the
lifecycle method components will receive
across it’s going to receive the next
props and in fact I don’t care about any
other props except the exercise object
so what I’ll do is I’m actually going to
call set state and I’m going to extract
out all the properties of the exercise
on the state so that’s going to update
the title the description as well as the
muscles so now let’s say I select bicep
curls and then I switch to let say
benchpress that’s of course going to
update the form and that’s going to
happen because of the component will
receive props because we’re basically
listening to the update to the new props
we’re grabbing the props and we’re
basically updating the state with those
props so we’re sort of like syncing the
props with the state on the inform
component and that’s how it’s gonna work
now like I said the label of the button
is a bit awkward it’s always create
that’s because we hard-coded the create
value in there we can actually do is we
can actually check if we have an
exercise so the initial exercise on the
props if we do we know that we’re
dealing with an existing exercise that
needs to be edited otherwise we can
default to create
as the label for the button so in this
case I click on the plus icon the label
is going to be create but if I want to
added something because we do have the
exercise selected it’s going to display
the ‘edit label and then in fact for the
exercise of course to keep up with the
pattern that we’ve been using we can
extract the exercise or the structure it
out the prompts without actually
referencing this props directly now
going back to handle submit methods so
what’s happening here is in the past we
wanted to add the ID property to the
newly created exercise object and that’s
because when you fill out the form to
create an exercise you would have the
title you have description and the
muscles but you’re not gonna have the ID
that’s why we had to add the idea
manually but if you’re editing an
existing exercise it’s actually not the
case because the ID is already going to
be available on the props in fact it’s
actually going to be available on the
state as well because we are signing the
whole exercise object on the state so
what we can do here is we can set the ID
first and then extract out all the
properties of the exercise and the
exercise is coming from the state and if
we do have the ID on the state that’s
going to overwrite this ID property as
well let’s try editing something I’m
gonna click on overhead press or head
press for shoulders let’s say let’s get
Khan Pettit and in this case it’s
complaining about the title property oh
and that’s because there’s no exercise
object on the state now we have the
properties of the exercise directly on
the state we don’t have the exercise
probably as such so the state and make
some sense I’m just going to delete it
what we’re gonna do instead is we’re
gonna grab the title of the state’s
directly and then instead of referencing
the exercise I’ll reference this state
so that’s gonna extract all the
properties of the state to a new object
overriding the ID if that’s the case
like I said if we do have an exercise
that’s currently being edited
otherwise is going to add the ID
property because we don’t have the ID on
the state and that’s the case when you
creating your exercise may click on the
plus icon and then lastly instead of
passing a new object to set state like
that we’re actually going to reference
this get initial state and this would be
useful for this situation when you
actually create a new exercise so that’s
gonna clear out the fields because the
gift in that state is actually going to
return an object with all those fields
set to empty strings like that like I
said this is gonna clear out the form in
the model when you create an exercise
but if we try to edit something so let’s
say overhead press I’ll call it or head
press for shoulders let’s click on edit
as you can see here the title is being
updated but the problem is the title is
not being updated on the form component
for some reason and the reason that’s
happening is if you go back to @gs when
we call handle exercise at it we are not
updating the currently selected exercise
so the problem is the currently selected
exercise keeps the same value of the
title muscles and description just like
before but in case we are actually
editing the exercise we also need not to
forget to update the selected exercise
as well so I’m just gonna pass the
exercise that’s going to overwrite the
exercise property over here it’s updated
to a brand new object that’s coming from
handle exercise at it he’ll learn method
so now if I edit something so let’s add
at the description and awesome adults
exercise edit and now if I click on that
say benchpress
clear result the form if I click back on
overhead press that updates the
description but maybe I want to change
the category to let’s say back now I’m
going to update the title to
dumbbell rows this would be an exercise
a super awesome exercise for your back
something like that edit so it updates
the tile updates the description as well
but everything else works just exactly
like before you can also delete it you
can go back to something else but if you
noticed there for a second it actually
kept the exercise selected so the one
thing that we need to do though is when
we actually delete an exercise we have
to set the edit mode to false because if
I were to continue trying to edit the
title or description or whatever it’s
gonna try to reference an exercise
that’s no longer existent but we also
need to update these selected exercise
to an empty object as well so it tried
to update the overhead press I’ll change
it to barbell press click on edit that’s
going to update the exercise but if I
click on delete that’s going to set the
edit mode to false so you don’t see the
form but it’s also going to set the
exercise to an empty object as well and
then the same thing also needs to happen
for when you actually select and you
exercise so for example if I click on
edit for dips and I click on the list
item for pull-ups that’s actually going
to update the selected exercise but what
if we just wanted to see the details of
that exercise not necessarily editing it
out if I want to edit it out I’ll need
to click on the Edit icon specifically
so to fix that what we can do here
inside of handle exercise to select this
one is responsible for handling the use
case when you select an exercise what we
can do inside is we can actually set the
edit mode to false as well so to show
you the scenario once again
click on edits for bench press then I
click on barbell curls as the list item
itself
I just basically see the details for
that exercise so I don’t necessarily
want to edit it out if I want to edit it
I have to click on the Edit icon is
welcome we did forget though so let’s
say I creating your exercise I’m gonna
call it leg raises this would be for
your legs of course we can skip the
description when I click on create it’s
kind of clear out the form but it’s
actually not going to close out the
model because we forgot to update the
states on the model by calling the
handle toggle although it does create
the exercise that we can then see the
information about it we can also update
the title or a description to anything
else we want and of course that’s gonna
work go back to exercise everything is
being updated but like I said the dog is
not being closed so one thing we can do
here is instead of calling the oncreate
let’s actually call a local method we’re
gonna call it handle will form a submit
so I’m going to create that method and
it’ll form submit that method is going
to have a callback function which will
expect the exercise object and then
inside of the callback we’re gonna call
this handle toggle this is going to
update the property of open on the
dialog so it’s gonna close it off and
then finally we’re gonna call this props
on v8 with the exercise object so if I
save it let’s write creating the
exercise again this will be leg raises
so therefore your legs
okay description let’s seal it off you
created that’s gonna add the exercise to
the legs category and then it’s also
going to close off the model just like
we would expect and then finally the
oncreate property here is unnecessary so
we can get rid of it and then I also
noticed we used to have an area label I
believe for now we can just kill the ID
because it’s no longer relevant so
that’s about it for your review as far
as forums and you look at roles and
dialogues and all that stuff so no it’s
kind of a lot for a single video but we
did a lot of refactoring and I think at
this point this would be a good place to
stop and in the next video we’re
actually going to dive deep into styling
and theming in material you I hope to
see you then and enjoy the rest of your day
say I click on another exercise I want
to add it dips I click on the icon but
it doesn’t actually update the form so
what’s going on here now if you go to
form what we basically did here is set
the initial state based on the props and
really it’s actually an anti-pattern in
most cases because by doing that you are
basically shooting yourself in the foot
whenever the properties on the state so
on the application state change so for
instance in this case the exercise is
actually being updated whenever I click
on another exercise so in this case the
selected exercises bench-pressed
behind the scenes but it’s not updating
this state on the form because the state
is static it’s not synced up to the
props it’s only being initialized once
when you’re calling get in that state
method so when the form actually mounts
now to find more information about this
let’s actually head over to react.js
world and just to make this clear let’s
go to dogs let’s go to reference if you
click on react component you scroll down
you’re gonna find a section for the
constructor and you’re gonna see exactly
what I’m talking about when they
describe the pattern that we’re actually
using for our form so setting the states
based on the props well like I said it’s
an anti-pattern but in rare cases it
could actually be useful the reason it’s
useful for us is because we’re actually
using a controlled component so this
form component maintains its own state
because I don’t really want to update
the title when you type into it right
because imagine we’ll have an API call
that’s initiating a put request to the
server well what’s going to happen if I
actually maintain the state outside the
form do we want to send the put request
on every T stroke well that’s not very
efficient so we can keep the state
inside the form so you can add at the
fields as you want it’s actually not
going to update anything on the Left
pane as long as you don’t click only
create well in this case we’re gonna
change it to edit but as long as you
don’t click on the button these
that button that is okay so in this case
going back to the dogs what they suggest
doing is well if you do want to use this
battery be careful of course because in
most cases it’s easier to lift up the
states to the parent but in this case we
actually have a controlled component a
form that maintains its own state like I
said so to make it work in the end what
we need to do is we actually need to add
this component will receive props life
cycle method and inside of it we can
actually get the next props and we can
actually update the states based on
those props so what I’m gonna do here is
I’m actually going to create the
lifecycle method components will receive
across it’s going to receive the next
props and in fact I don’t care about any
other props except the exercise object
so what I’ll do is I’m actually going to
call set state and I’m going to extract
out all the properties of the exercise
on the state so that’s going to update
the title the description as well as the
muscles so now let’s say I select bicep
curls and then I switch to let say
benchpress that’s of course going to
update the form and that’s going to
happen because of the component will
receive props because we’re basically
listening to the update to the new props
we’re grabbing the props and we’re
basically updating the state with those
props so we’re sort of like syncing the
props with the state on the inform
component and that’s how it’s gonna work
now like I said the label of the button
is a bit awkward it’s always create
that’s because we hard-coded the create
value in there we can actually do is we
can actually check if we have an
exercise so the initial exercise on the
props if we do we know that we’re
dealing with an existing exercise that
needs to be edited otherwise we can
default to create
as the label for the button so in this
case I click on the plus icon the label
is going to be create but if I want to
added something because we do have the
exercise selected it’s going to display
the ‘edit label and then in fact for the
exercise of course to keep up with the
pattern that we’ve been using we can
extract the exercise or the structure it
out the prompts without actually
referencing this props directly now
going back to handle submit methods so
what’s happening here is in the past we
wanted to add the ID property to the
newly created exercise object and that’s
because when you fill out the form to
create an exercise you would have the
title you have description and the
muscles but you’re not gonna have the ID
that’s why we had to add the idea
manually but if you’re editing an
existing exercise it’s actually not the
case because the ID is already going to
be available on the props in fact it’s
actually going to be available on the
state as well because we are signing the
whole exercise object on the state so
what we can do here is we can set the ID
first and then extract out all the
properties of the exercise and the
exercise is coming from the state and if
we do have the ID on the state that’s
going to overwrite this ID property as
well let’s try editing something I’m
gonna click on overhead press or head
press for shoulders let’s say let’s get
Khan Pettit and in this case it’s
complaining about the title property oh
and that’s because there’s no exercise
object on the state now we have the
properties of the exercise directly on
the state we don’t have the exercise
probably as such so the state and make
some sense I’m just going to delete it
what we’re gonna do instead is we’re
gonna grab the title of the state’s
directly and then instead of referencing
the exercise I’ll reference this state
so that’s gonna extract all the
properties of the state to a new object
overriding the ID if that’s the case
like I said if we do have an exercise
that’s currently being edited
otherwise is going to add the ID
property because we don’t have the ID on
the state and that’s the case when you
creating your exercise may click on the
plus icon and then lastly instead of
passing a new object to set state like
that we’re actually going to reference
this get initial state and this would be
useful for this situation when you
actually create a new exercise so that’s
gonna clear out the fields because the
gift in that state is actually going to
return an object with all those fields
set to empty strings like that like I
said this is gonna clear out the form in
the model when you create an exercise
but if we try to edit something so let’s
say overhead press I’ll call it or head
press for shoulders let’s click on edit
as you can see here the title is being
updated but the problem is the title is
not being updated on the form component
for some reason and the reason that’s
happening is if you go back to @gs when
we call handle exercise at it we are not
updating the currently selected exercise
so the problem is the currently selected
exercise keeps the same value of the
title muscles and description just like
before but in case we are actually
editing the exercise we also need not to
forget to update the selected exercise
as well so I’m just gonna pass the
exercise that’s going to overwrite the
exercise property over here it’s updated
to a brand new object that’s coming from
handle exercise at it he’ll learn method
so now if I edit something so let’s add
at the description and awesome adults
exercise edit and now if I click on that
say benchpress
clear result the form if I click back on
overhead press that updates the
description but maybe I want to change
the category to let’s say back now I’m
going to update the title to
dumbbell rows this would be an exercise
a super awesome exercise for your back
something like that edit so it updates
the tile updates the description as well
but everything else works just exactly
like before you can also delete it you
can go back to something else but if you
noticed there for a second it actually
kept the exercise selected so the one
thing that we need to do though is when
we actually delete an exercise we have
to set the edit mode to false because if
I were to continue trying to edit the
title or description or whatever it’s
gonna try to reference an exercise
that’s no longer existent but we also
need to update these selected exercise
to an empty object as well so it tried
to update the overhead press I’ll change
it to barbell press click on edit that’s
going to update the exercise but if I
click on delete that’s going to set the
edit mode to false so you don’t see the
form but it’s also going to set the
exercise to an empty object as well and
then the same thing also needs to happen
for when you actually select and you
exercise so for example if I click on
edit for dips and I click on the list
item for pull-ups that’s actually going
to update the selected exercise but what
if we just wanted to see the details of
that exercise not necessarily editing it
out if I want to edit it out I’ll need
to click on the Edit icon specifically
so to fix that what we can do here
inside of handle exercise to select this
one is responsible for handling the use
case when you select an exercise what we
can do inside is we can actually set the
edit mode to false as well so to show
you the scenario once again
click on edits for bench press then I
click on barbell curls as the list item
itself
I just basically see the details for
that exercise so I don’t necessarily
want to edit it out if I want to edit it
I have to click on the Edit icon is
welcome we did forget though so let’s
say I creating your exercise I’m gonna
call it leg raises this would be for
your legs of course we can skip the
description when I click on create it’s
kind of clear out the form but it’s
actually not going to close out the
model because we forgot to update the
states on the model by calling the
handle toggle although it does create
the exercise that we can then see the
information about it we can also update
the title or a description to anything
else we want and of course that’s gonna
work go back to exercise everything is
being updated but like I said the dog is
not being closed so one thing we can do
here is instead of calling the oncreate
let’s actually call a local method we’re
gonna call it handle will form a submit
so I’m going to create that method and
it’ll form submit that method is going
to have a callback function which will
expect the exercise object and then
inside of the callback we’re gonna call
this handle toggle this is going to
update the property of open on the
dialog so it’s gonna close it off and
then finally we’re gonna call this props
on v8 with the exercise object so if I
save it let’s write creating the
exercise again this will be leg raises
so therefore your legs
okay description let’s seal it off you
created that’s gonna add the exercise to
the legs category and then it’s also
going to close off the model just like
we would expect and then finally the
oncreate property here is unnecessary so
we can get rid of it and then I also
noticed we used to have an area label I
believe for now we can just kill the ID
because it’s no longer relevant so
that’s about it for your review as far
as forums and you look at roles and
dialogues and all that stuff so no it’s
kind of a lot for a single video but we
did a lot of refactoring and I think at
this point this would be a good place to
stop and in the next video we’re
actually going to dive deep into styling
and theming in material you I hope to
see you then and enjoy the rest of your day
Please follow and like us: