right so now that we have a working
dialogue let’s move on to the form when
I go back to the docs here and let’s
search for text fields and as you can
see here we’ve got a bunch of different
example four text fields and let’s
actually use the very first one so for
the text field the element itself is
obviously called text field and you can
provide things like label class name
value as well as the on change Handler
and even the margin so let’s grab that
element from the example source code
let’s go back to our application and
let’s just simply paste it inside a form
of course we’re going to need to import
the text field from my shul UI let’s not
forget that
text field and then we’re missing the
classes for now I’m just gonna delete
the classes now as for the on change
handler we’re actually going to need to
create the method so let’s go back to
the dogs and see how they handle this
scenario but they basically do is they
provide the name of the field to the
handle on change method and then that
method receives the name as well as the
event object and then they basically set
the name and they extract the value from
the event object and that’s how the
value of the text field is getting
updated on the state it’s actually one
of the reasons that we had to make this
component a stateful component such that
it’s going to encapsulate its own form
data until you click the Create button
and basically once you click on the
create button that’s going to submit the
form we’re gonna call it prop that’s
gonna be received from the parent and
then the app component is going to be
responsible for adding the new exercise
to the global application state so let’s
receive the name then we’re going to
receive the event object finally this is
going to be a function we’re gonna do
inside of that function is we’re going
to set the state okay and then the
property on the state that we’re gonna
set is going to be the name of the field
in fact we’re going to have multiple
fields on the state and all those fields
are going to refer to the exercise so
the one property you could create could
be called form and inside of that form
you would
your title in the beginning it might be
an action you might have your
inscription you’re not gonna have
anything by default and then you’re
gonna have your muscles property and
this is going to basically mirror the
format up and exercise inside of the
store right so we have the ID let the
title description and then the muscles
basically the category or the muscles
group right so we’re basically mirroring
that same data shape or the exercise and
like I said this object is basically
going to represent the exercise itself
I’m just gonna call it the exercise for
clarity and then once we do set the
property on the state so this name could
be something like title description and
muscles and of course that name is going
to come from the text field itself
so let’s actually have this one for the
title the label is going to be the title
of the exercise and ID well though it
can actually get rid of the value well
the value we’re going to need to extract
from this state so how is this actually
going to work so we do have the exercise
and the exercise for Dean’s title
description and the muscles let’s go
back to the render method and what I’m
going to do is I’m actually going to
target the exercise but then we’re going
to deeply structure the title
description and the muscles as well
think so I’m going to use the title
property for the value so it’s going to
be an empty string by default and
velocity for this method what we do need
to do is to actually reach out to the
state and spread out all the properties
from the exercise because we might
already have a description as well as
the muscles if we’re talking about the
title for example right so imagine we do
actually type into the text field that
refers to the title but then we do need
to also save the existing description
and the muscles if we do have any I’m
gonna set the name property and then
we’re gonna extract the value from the
event so let’s do exactly that let’s
have the target property on the event
object and let’s also grab the value
from
and finally I’m just going to set the
value to the name property like that and
of course this needs to be nested inside
of the exercise as well so let’s grab
all of that put it inside the exercise
object all of those properties are going
to go inside let’s save it and let’s
click on the plus icon to open the
Moodle so for instance let press this
will be the title of the exercise let’s
also add the description just below it
so I’m going to copy that element I
baste it let’s have a description and
the name is going to be description okay
just copy and put the initial value for
the description we’re going to keep the
same margin that’s gonna create margin
top and in fact let’s also put a break
just below it so that’s gonna put the
element on a new line like that now for
the description we might need to have a
multi-line object so let’s keep
scrolling down through the example and
you’re gonna see this multi-line text
field over here so by adding the
multi-line property then this is
basically a shorthand to sing multi-line
equals true okay and then oh by also
adding the number of rolls that’s gonna
allow you to have a text field that
looks something like this lemme just
close off source code yeah that looks
pretty much something like this so this
is a multi-line depth field that does
have a default value if you keep typing
right eventually you’re gonna be child
the number of four lines and from then
on you’re gonna have these the scrollbar
right there yeah let’s go back to our
example here than add a multi-line
property I’m going to set roles to four
let’s save it let’s open the dialogue
this is what the description would look
like and finally we’re also going to
need to have a select element and the
Select element can be found in a
different section that’s old selects and
the docs
and these are all the different kinds of
selects you’re gonna have and we’re
gonna use this one of course you could
also use the native select and as the
documentation indicates it’s also
improved for mobile devices as well but
we’re going to just use the standard
select that looks something like this
let’s expand the source code and let’s
just simply grab that element know the
mark-up is a little bit more complicated
than a simple depth field but still it’s
fairly simple that just below the title
like that and we’re going to need to add
a break as well so we now have a form
control with the input label the select
box and the menu items that represent
the items inside of the select okay so
we’re going to need to import a few
things here beneath the menu item we’re
going to need room control as well as
each input label so what I’m gonna do is
first of all let’s grab the form control
we’re gonna need to import form control
that’s gonna come from a tool UI / form
we’re gonna need one for input label
let’s see where that one comes from
input label comes from slash and Butch
so we’re gonna do that now what else are
we missing here we’re missing the select
deselect can be extracted on its own so
from material UI it’s just simply
appended to the end of the list and
finally we’re gonna need to have the
menu item
so let’s attract the menu item this
one’s gonna come from slash menu let’s
say that now we do need to do though is
we need to remove these class names for
now for the input label itself this one
is going to reference the muscles
property and this one is gonna refer to
the muscles
basically the muscles group or basically
the category that you can also see back
in a store over here these are the
different categories that we define as
for the initial values select this one
is also going to refer to the muscles
property that we extracted from the
state over here and then we can also
remove the input props for the on change
handler this one is going to need to
receive the muscles so we’re gonna save
that and then the first one we can get
rid of here we’re basically going to
need to map through the muscles or the
categories of Michael like categories
and of course this one is we need to
come from the parent the parent is going
to be responsible for passing this prop
but that’s called a map function I’m
gonna have a category and then for every
category we’re going to display a menu
item of course
so let’s base that in and we move the
other ones and then of course the
categories like I said well that’s gonna
need to come from the header right so
we’re gonna need to have a categories
property in fact let’s actually call it
the muscles because that’s what the
property name is inside of the app
component these are the muscles that
come directly from the store let’s grab
those muscles and that’s also passing
down to the header component so I passed
the muscles let’s say the file back in
the header the muscles are gonna go
directly to create dialogue element so
let’s add those as well and finally
because we already have the muscles
property that is coming directly from
the state from the exercise on the state
what I’m gonna do is I’m actually going
to extract another constant in the name
of that property is muscles but I’m
actually going to call it categories and
this one’s gonna come
this props like that so we’re gonna grab
the categories and now we’re gonna map
through them with the map function now
for the value we can grab the category
itself and that the text of the menu
item is also going to be the category so
this would be something like shoulders
or arms or legs if you open up the
dialog you can already see the muscles
inside of the drop-down list but of
course we’re not done here we also need
to adjust the width of the elements over
here and for that we can go back to the
documentation and if you’ve been
glancing over documentation you’ve
probably already seen this weird syntax
where they basically define the styles
to a function that receives a theme and
returns an object and as you can see
this object resembles these CSS
properties that you would typically see
defined in CSS stylesheets file right so
you might have your root element this
will be the class name for your element
and then you also define these styles
for that CSS or HTML element so you
might have your display property set to
flex you might have your flex wrap set
to wrap and of course if you do the same
thing for every other element that you
like to define what happens next is
inside of material ey what they
basically do is at the end of the file
they call this with styles method and
they pass these styles object as being
defined at the top of the file over here
this one constant and what happens is
that styles object is being injected
inside of the react component and by the
end of that transformation we end up
with the classes property on the props
and which reference that classes
property like so for example so they
have a form element that has a class
name just a regular class name attribute
and then they pass the root property of
the classes that they receive in the
props and the root property as you
probably can see already refers to the
root element as we defined on the styles
this approach to styling is known as CSS
and JavaScript is also a library that’s
on
JSS for JavaScript style sheets it’s a
separate independent library for styling
in JavaScript and react in particular
and it’s actually being used at the core
of material UI so this is the approach
we’re gonna use let’s go back to our
application here I’m gonna do is I’m
gonna create a constant of styles which
is going to be a function that returns
an object instead of that object we’re
gonna have a property called form
control and that form control is going
to have a width of 500 pixels what we do
need to do next is we need to import
this with styles property so let’s grab
it from the Styles immaturely wipe and
we do need to do in the end as we
actually need to wrap our class with
these styles let’s pass these styles to
this hoc higher-order component with
style
that’s what it is and let’s also
basically wrap our class with the
brackets and this is going to invoke
that with Styles function with our class
that we have over here
don’t worry save that so what’s gonna
happen is we’re actually going to
receive a property called classes on the
props so let’s receive that property
less to structure it on the props and
finally I’m going to use those classes
and I’m going to have a property of
class name on the text field over here
the text field is going to receive a
class name property and we’re gonna
extract the form control property for
most classes so let’s save this and
let’s actually open up the dialogue as
you can see the title is going to be
expended to 500 pixels because that’s
the what that we have defined on the
form control element actually on that
class so I’m going to grab this property
called last name I’m going to do the
same thing for form control I’m also
going to do the same thing for our
description
so that every element in the form is
going to have the same width this is
what it’s going to look like so we’ve
got our list of muscles we’ve got the
title we also got the description the
one last thing that we are missing
actually is we’re missing the on click
Handler on the button so what I’m gonna
do is I’m actually gonna put the
different properties over here in a
separate line I’m gonna add on click to
the button and let’s create a new method
we’re gonna call it handle submit so you
can think of this button as something
that triggers the submit event on the
form and then we’re gonna have a
function hey the first thing that we
need to do though is validation so when
I leave a to do note that we do have to
come back to this method and then
validate the form before we basically
submit it or before we do anything with
that one the next thing they were to do
is we could actually extract the
exercise from the state
so let’s actually destructor it the
exercise from our state this would be
the exercise object and once we do have
the exercise well we can actually call a
method on the props matter method could
be called something like on create and
we’re gonna pass the exercise into it
and of course this method doesn’t exist
yet so we’re gonna need to pass it from
the header this method is gonna be
called in response to a new exercise
being created so let’s create another
prop perhaps on exercise create this
one’s gonna need to come from the app
component of course so I go back to up
we’re gonna need to pass a new property
and of course we’re gonna need to create
a new method so what’s called handle
exercise create in fact I’m gonna follow
the same convention for method names so
I’m going to move that IDI ending from
the end of methods let’s keep it in
present
and we also need to create that handle
exercise create method of course this
one is going to receive the exercise
object eventually it’s going to be added
on the states what’s also adjusting
names of the older methods so as to not
break the existing functionality and
once the files are saved or we need to
do here is we’re going to need to set
the state and just like before we’re
going to receive the exercises from the
old state or basically the previous
state we’re going to return a new object
that represents the new state and that
new state is going to have the exercises
just like before except we’re also going
to have a new array we’re basically
going to spread out all of the elements
from the old exercises and we’re also
going to pass the new exercise object
like that so let’s open up the model you
know creating your exercise it’s gonna
be called dumbbell flyes and this is the
exercise for your chest muscles and for
the description let’s just say chest
exercise and of course you could add
more details but once you click on
create you’re gonna see that that
exercise is being added to the chest
category so if you click on chest you’re
gonna see that exercise in there and we
have the title we have the description
we do have a few problems though if you
click back on the plus icon you’re gonna
see the old States still being saved on
the form so the one thing we need to do
is after we call this props on create we
actually need to also clear out the
state on the existing model or the
dialog so what I’m gonna do is I’m
actually going to set state with the
exercise object and we’re going to clear
out the title the description
like that we’re gonna set description to
an empty string and the same thing is
gonna happen for muscles as well so this
is basically going to clear out the form
but we also need to close the model so
let’s also set the open property to
false this is going to close the model
and the final thing that we did forget
to do though is we also need to add the
ID property on the exercise so we can
actually do here is we can actually
create a new object spreading out all
the properties of the exercise like that
but also creating a new ID property and
this one’s going to target the exercise
title or gonna convert it to lowercase
like that we’re also gonna call we place
on it what we need to replace is all of
these spaces that’s what I’m going to
add G at the end of the regex
let’s gonna remove all of these spaces
and basically replace them with a – so
we’re going to take the title and make
it a pretty URL basically this is what
it’s going to do now once we save that
we can click on the plus icon let’s add
dumbbell flyes to chest like that this
is also going to be a chest exercise and
we click on create that’s gonna close
the model it’s also going to clear out
the fields on the forum and it’s also
going to add the exercise to each ask
category as you can see over there so if
I click on chest you can see all of the
exercises for the chest and this is our
exercise that we just created one minor
thing that we did forget though is we
forgot to include a key property for our
menu item over here so we can just
basically pass a category mask an LED
ate the warning that we would otherwise
get but other than that it should work
fine them so that’s about it for models
form as well as a quick introduction to
styling and theming and material UI the
next videos we’re going along to the
delete as well as edit actions and we’re
also going to explore theming in a lot
more detail so I hope you and I’ll see you next time
dialogue let’s move on to the form when
I go back to the docs here and let’s
search for text fields and as you can
see here we’ve got a bunch of different
example four text fields and let’s
actually use the very first one so for
the text field the element itself is
obviously called text field and you can
provide things like label class name
value as well as the on change Handler
and even the margin so let’s grab that
element from the example source code
let’s go back to our application and
let’s just simply paste it inside a form
of course we’re going to need to import
the text field from my shul UI let’s not
forget that
text field and then we’re missing the
classes for now I’m just gonna delete
the classes now as for the on change
handler we’re actually going to need to
create the method so let’s go back to
the dogs and see how they handle this
scenario but they basically do is they
provide the name of the field to the
handle on change method and then that
method receives the name as well as the
event object and then they basically set
the name and they extract the value from
the event object and that’s how the
value of the text field is getting
updated on the state it’s actually one
of the reasons that we had to make this
component a stateful component such that
it’s going to encapsulate its own form
data until you click the Create button
and basically once you click on the
create button that’s going to submit the
form we’re gonna call it prop that’s
gonna be received from the parent and
then the app component is going to be
responsible for adding the new exercise
to the global application state so let’s
receive the name then we’re going to
receive the event object finally this is
going to be a function we’re gonna do
inside of that function is we’re going
to set the state okay and then the
property on the state that we’re gonna
set is going to be the name of the field
in fact we’re going to have multiple
fields on the state and all those fields
are going to refer to the exercise so
the one property you could create could
be called form and inside of that form
you would
your title in the beginning it might be
an action you might have your
inscription you’re not gonna have
anything by default and then you’re
gonna have your muscles property and
this is going to basically mirror the
format up and exercise inside of the
store right so we have the ID let the
title description and then the muscles
basically the category or the muscles
group right so we’re basically mirroring
that same data shape or the exercise and
like I said this object is basically
going to represent the exercise itself
I’m just gonna call it the exercise for
clarity and then once we do set the
property on the state so this name could
be something like title description and
muscles and of course that name is going
to come from the text field itself
so let’s actually have this one for the
title the label is going to be the title
of the exercise and ID well though it
can actually get rid of the value well
the value we’re going to need to extract
from this state so how is this actually
going to work so we do have the exercise
and the exercise for Dean’s title
description and the muscles let’s go
back to the render method and what I’m
going to do is I’m actually going to
target the exercise but then we’re going
to deeply structure the title
description and the muscles as well
think so I’m going to use the title
property for the value so it’s going to
be an empty string by default and
velocity for this method what we do need
to do is to actually reach out to the
state and spread out all the properties
from the exercise because we might
already have a description as well as
the muscles if we’re talking about the
title for example right so imagine we do
actually type into the text field that
refers to the title but then we do need
to also save the existing description
and the muscles if we do have any I’m
gonna set the name property and then
we’re gonna extract the value from the
event so let’s do exactly that let’s
have the target property on the event
object and let’s also grab the value
from
and finally I’m just going to set the
value to the name property like that and
of course this needs to be nested inside
of the exercise as well so let’s grab
all of that put it inside the exercise
object all of those properties are going
to go inside let’s save it and let’s
click on the plus icon to open the
Moodle so for instance let press this
will be the title of the exercise let’s
also add the description just below it
so I’m going to copy that element I
baste it let’s have a description and
the name is going to be description okay
just copy and put the initial value for
the description we’re going to keep the
same margin that’s gonna create margin
top and in fact let’s also put a break
just below it so that’s gonna put the
element on a new line like that now for
the description we might need to have a
multi-line object so let’s keep
scrolling down through the example and
you’re gonna see this multi-line text
field over here so by adding the
multi-line property then this is
basically a shorthand to sing multi-line
equals true okay and then oh by also
adding the number of rolls that’s gonna
allow you to have a text field that
looks something like this lemme just
close off source code yeah that looks
pretty much something like this so this
is a multi-line depth field that does
have a default value if you keep typing
right eventually you’re gonna be child
the number of four lines and from then
on you’re gonna have these the scrollbar
right there yeah let’s go back to our
example here than add a multi-line
property I’m going to set roles to four
let’s save it let’s open the dialogue
this is what the description would look
like and finally we’re also going to
need to have a select element and the
Select element can be found in a
different section that’s old selects and
the docs
and these are all the different kinds of
selects you’re gonna have and we’re
gonna use this one of course you could
also use the native select and as the
documentation indicates it’s also
improved for mobile devices as well but
we’re going to just use the standard
select that looks something like this
let’s expand the source code and let’s
just simply grab that element know the
mark-up is a little bit more complicated
than a simple depth field but still it’s
fairly simple that just below the title
like that and we’re going to need to add
a break as well so we now have a form
control with the input label the select
box and the menu items that represent
the items inside of the select okay so
we’re going to need to import a few
things here beneath the menu item we’re
going to need room control as well as
each input label so what I’m gonna do is
first of all let’s grab the form control
we’re gonna need to import form control
that’s gonna come from a tool UI / form
we’re gonna need one for input label
let’s see where that one comes from
input label comes from slash and Butch
so we’re gonna do that now what else are
we missing here we’re missing the select
deselect can be extracted on its own so
from material UI it’s just simply
appended to the end of the list and
finally we’re gonna need to have the
menu item
so let’s attract the menu item this
one’s gonna come from slash menu let’s
say that now we do need to do though is
we need to remove these class names for
now for the input label itself this one
is going to reference the muscles
property and this one is gonna refer to
the muscles
basically the muscles group or basically
the category that you can also see back
in a store over here these are the
different categories that we define as
for the initial values select this one
is also going to refer to the muscles
property that we extracted from the
state over here and then we can also
remove the input props for the on change
handler this one is going to need to
receive the muscles so we’re gonna save
that and then the first one we can get
rid of here we’re basically going to
need to map through the muscles or the
categories of Michael like categories
and of course this one is we need to
come from the parent the parent is going
to be responsible for passing this prop
but that’s called a map function I’m
gonna have a category and then for every
category we’re going to display a menu
item of course
so let’s base that in and we move the
other ones and then of course the
categories like I said well that’s gonna
need to come from the header right so
we’re gonna need to have a categories
property in fact let’s actually call it
the muscles because that’s what the
property name is inside of the app
component these are the muscles that
come directly from the store let’s grab
those muscles and that’s also passing
down to the header component so I passed
the muscles let’s say the file back in
the header the muscles are gonna go
directly to create dialogue element so
let’s add those as well and finally
because we already have the muscles
property that is coming directly from
the state from the exercise on the state
what I’m gonna do is I’m actually going
to extract another constant in the name
of that property is muscles but I’m
actually going to call it categories and
this one’s gonna come
this props like that so we’re gonna grab
the categories and now we’re gonna map
through them with the map function now
for the value we can grab the category
itself and that the text of the menu
item is also going to be the category so
this would be something like shoulders
or arms or legs if you open up the
dialog you can already see the muscles
inside of the drop-down list but of
course we’re not done here we also need
to adjust the width of the elements over
here and for that we can go back to the
documentation and if you’ve been
glancing over documentation you’ve
probably already seen this weird syntax
where they basically define the styles
to a function that receives a theme and
returns an object and as you can see
this object resembles these CSS
properties that you would typically see
defined in CSS stylesheets file right so
you might have your root element this
will be the class name for your element
and then you also define these styles
for that CSS or HTML element so you
might have your display property set to
flex you might have your flex wrap set
to wrap and of course if you do the same
thing for every other element that you
like to define what happens next is
inside of material ey what they
basically do is at the end of the file
they call this with styles method and
they pass these styles object as being
defined at the top of the file over here
this one constant and what happens is
that styles object is being injected
inside of the react component and by the
end of that transformation we end up
with the classes property on the props
and which reference that classes
property like so for example so they
have a form element that has a class
name just a regular class name attribute
and then they pass the root property of
the classes that they receive in the
props and the root property as you
probably can see already refers to the
root element as we defined on the styles
this approach to styling is known as CSS
and JavaScript is also a library that’s
on
JSS for JavaScript style sheets it’s a
separate independent library for styling
in JavaScript and react in particular
and it’s actually being used at the core
of material UI so this is the approach
we’re gonna use let’s go back to our
application here I’m gonna do is I’m
gonna create a constant of styles which
is going to be a function that returns
an object instead of that object we’re
gonna have a property called form
control and that form control is going
to have a width of 500 pixels what we do
need to do next is we need to import
this with styles property so let’s grab
it from the Styles immaturely wipe and
we do need to do in the end as we
actually need to wrap our class with
these styles let’s pass these styles to
this hoc higher-order component with
style
that’s what it is and let’s also
basically wrap our class with the
brackets and this is going to invoke
that with Styles function with our class
that we have over here
don’t worry save that so what’s gonna
happen is we’re actually going to
receive a property called classes on the
props so let’s receive that property
less to structure it on the props and
finally I’m going to use those classes
and I’m going to have a property of
class name on the text field over here
the text field is going to receive a
class name property and we’re gonna
extract the form control property for
most classes so let’s save this and
let’s actually open up the dialogue as
you can see the title is going to be
expended to 500 pixels because that’s
the what that we have defined on the
form control element actually on that
class so I’m going to grab this property
called last name I’m going to do the
same thing for form control I’m also
going to do the same thing for our
description
so that every element in the form is
going to have the same width this is
what it’s going to look like so we’ve
got our list of muscles we’ve got the
title we also got the description the
one last thing that we are missing
actually is we’re missing the on click
Handler on the button so what I’m gonna
do is I’m actually gonna put the
different properties over here in a
separate line I’m gonna add on click to
the button and let’s create a new method
we’re gonna call it handle submit so you
can think of this button as something
that triggers the submit event on the
form and then we’re gonna have a
function hey the first thing that we
need to do though is validation so when
I leave a to do note that we do have to
come back to this method and then
validate the form before we basically
submit it or before we do anything with
that one the next thing they were to do
is we could actually extract the
exercise from the state
so let’s actually destructor it the
exercise from our state this would be
the exercise object and once we do have
the exercise well we can actually call a
method on the props matter method could
be called something like on create and
we’re gonna pass the exercise into it
and of course this method doesn’t exist
yet so we’re gonna need to pass it from
the header this method is gonna be
called in response to a new exercise
being created so let’s create another
prop perhaps on exercise create this
one’s gonna need to come from the app
component of course so I go back to up
we’re gonna need to pass a new property
and of course we’re gonna need to create
a new method so what’s called handle
exercise create in fact I’m gonna follow
the same convention for method names so
I’m going to move that IDI ending from
the end of methods let’s keep it in
present
and we also need to create that handle
exercise create method of course this
one is going to receive the exercise
object eventually it’s going to be added
on the states what’s also adjusting
names of the older methods so as to not
break the existing functionality and
once the files are saved or we need to
do here is we’re going to need to set
the state and just like before we’re
going to receive the exercises from the
old state or basically the previous
state we’re going to return a new object
that represents the new state and that
new state is going to have the exercises
just like before except we’re also going
to have a new array we’re basically
going to spread out all of the elements
from the old exercises and we’re also
going to pass the new exercise object
like that so let’s open up the model you
know creating your exercise it’s gonna
be called dumbbell flyes and this is the
exercise for your chest muscles and for
the description let’s just say chest
exercise and of course you could add
more details but once you click on
create you’re gonna see that that
exercise is being added to the chest
category so if you click on chest you’re
gonna see that exercise in there and we
have the title we have the description
we do have a few problems though if you
click back on the plus icon you’re gonna
see the old States still being saved on
the form so the one thing we need to do
is after we call this props on create we
actually need to also clear out the
state on the existing model or the
dialog so what I’m gonna do is I’m
actually going to set state with the
exercise object and we’re going to clear
out the title the description
like that we’re gonna set description to
an empty string and the same thing is
gonna happen for muscles as well so this
is basically going to clear out the form
but we also need to close the model so
let’s also set the open property to
false this is going to close the model
and the final thing that we did forget
to do though is we also need to add the
ID property on the exercise so we can
actually do here is we can actually
create a new object spreading out all
the properties of the exercise like that
but also creating a new ID property and
this one’s going to target the exercise
title or gonna convert it to lowercase
like that we’re also gonna call we place
on it what we need to replace is all of
these spaces that’s what I’m going to
add G at the end of the regex
let’s gonna remove all of these spaces
and basically replace them with a – so
we’re going to take the title and make
it a pretty URL basically this is what
it’s going to do now once we save that
we can click on the plus icon let’s add
dumbbell flyes to chest like that this
is also going to be a chest exercise and
we click on create that’s gonna close
the model it’s also going to clear out
the fields on the forum and it’s also
going to add the exercise to each ask
category as you can see over there so if
I click on chest you can see all of the
exercises for the chest and this is our
exercise that we just created one minor
thing that we did forget though is we
forgot to include a key property for our
menu item over here so we can just
basically pass a category mask an LED
ate the warning that we would otherwise
get but other than that it should work
fine them so that’s about it for models
form as well as a quick introduction to
styling and theming and material UI the
next videos we’re going along to the
delete as well as edit actions and we’re
also going to explore theming in a lot
more detail so I hope you and I’ll see you next time
Please follow and like us: