now I’d like to go back to the footer 81
so we have a list of different
categories or basically muscle groups
over here being displayed in the footer
itself so what I’d like to do is I’d
like to add a handler for those
categories so when I click on something
and I select it I’d like to have a
callback function so if you in fact
let’s go back to the documentation just
so that I can show you what’s going on
here and the element that we’re using is
called tabs so if you go back in there I
think we use this specific example and
as you can see here there’s actually an
all change event listener so that’s
exactly we’re going to use back in here
I’m going to add it to the list and
let’s perhaps pass it from the GS
component let’s call it on select so
when a new category is being selected
I’d like to call that property that
we’re gonna pass on the footer on select
no we’re gonna create a new handler here
I’m gonna call it handle let’s quit
category selected I need to create a
method for that it’s gonna accept a new
category okay it’s gonna be an arrow
function and we’re gonna do instead of
that method we’re actually gonna set the
category on the state so you’re gonna
think of this category that’s being
passed as the current selected category
so for instance for now all are selected
but I also want to be able to select
that’s a chest or let’s say select legs
okay so we need to store that current or
selected category on the state as well
it actually added in this stage if we
wanted to for instance category by
default we can have it have to strain
but if we don’t do that if we basically
just extract it from the state or if we
try to do that right so it can use
destructuring again from a state
state this thing would be undefined
because there’s no such property on the
state at the moment and it’s perfectly
fine we’re still going to need to pass
it down to the footer though so let’s
pass down that category as a prop to the
footer okay let’s say that you know like
I said here we’re actually gonna get the
category string and we’re gonna set it
on the state now back to the footer we
are going to accept the category as well
it’s gonna come from the props so this
will be the current selected category as
it’s being defined on the state well the
problem here though is that we’re using
indexes right so the tabs component is
expecting an index rather than the
strain so the category would be
something like if we go back to the
store will be something like shoulders
or it might be something like arms but
the actual tabs component needs to have
an index so we need a way to transform
that train with that category into an
actual index so I’m gonna do is let’s
return all the markup for the time being
okay
the extra spacing there and what we’re
actually gonna do is I’m gonna have a
new constant and I call it index and
what we’re gonna do here is we’re gonna
say alright if we have a category but we
are actually going to find at that
category in the list of muscles and you
can think of that category is basically
a body part right we’re gonna find the
index on the muscles and we’re gonna
look through them we’re gonna get
another muscles object or you can call a
category or call it group okay and if
that group equals the category that’s
being passed from above then we know
that we get the index so for instance if
a category is being set to something
like the fact let’s actually set on the
state let’s set it to legs okay I’m
gonna say that when the category equals
legs we’re gonna be able to find legs
inside of the array that’s coming from
the store it’s gonna be the very last
element
over here and it’s index is actually
going to be 6 because we have seven
different exercises so it’s gonna be the
very last element and if we don’t have
category for any reason that we’re
basically going to default to index 0
now the thing here is when we have the
zero index that index is going to
correspond to the very first step okay
so for instance if I get legs my index
is going to be six however it needs to
be seven for new tabs because I already
have another tab on top of the other
ones so I actually need to increment the
index over here well let’s actually
remove the on change for the time being
let’s actually pass the index here let’s
save it and as you can see here the legs
already being selected but if file is a
tight arms of course that’s kind of
select the arm same thing chest for
instance right and if I remove the
category so right now we’re passing
undefined
down to the floor component and because
we have a check in place we’re checking
do we have the category if yes then find
the index and the muscles and then
incremented by one because like I said
we already have another tab over here on
the top otherwise the fault is zero and
that’s going to give us the element of
okay and finally let’s back the on
change handler
the one thing build the on select method
that we do pass from the Container
component over here well it’s actually
backed up by a method that expects a
category so it does expect an actual
string so beat arms would be legs but
what we do get in the on change method
once we do provide a callback is we
actually get an event itself but we also
get an index instead of the actual value
because in etabs are actually operating
with the indices now we can’t actually
provide a callback so this could be a
function for example and what we might
do is we might just simply call on
select and when we do actually call it
we might have a check that says well do
we have an actual index here and if it
does equal to the value of zero well
then I just want to pass an empty
because the category that corresponds to
all is not something that we have
defined in the store so we’re just gonna
pass an empty string otherwise I’m
actually gonna pass a category that
comes from the muscles and because I
have the index that just need to be
comment it by one so we need to reverse
the action then with it before over
there and we will find the element in
the muscles array and we’re just
basically gonna pass it up to the GS
component you have component as then we
see the category and the categories
gonna be set on the state now you could
do this in line but I do prefer to
actually extract it to a separate
constant function and we’re gonna do
perhaps on index select or something
like that let’s get rid of those curly
braces okay NATO function and we’re
gonna pass it down to you on a change
okay let’s say that and let’s see if it
actually works so now we should be able
to select a different category okay so I
click on shoulders that’s gonna select
the shoulders chest same thing and once
we get all of that category in out GS
I’d like to also pass it down to the
exercises component as well so we’re
gonna pass that property two exercises
back in in the FCS for the exercises
here we’re gonna accept the category
problem and we’re actually gonna do
inside of the math function over here
well we’re gonna actually display the
list if the category is set to something
that’s false e alright so this could be
undefined which is the case in the very
beginning when we create the up or it
could also be an empty string when you
actually select all from the list of
tabs okay or we want to display it if
the category actually equals in the loop
that we’re looping through at the moment
I’m gonna host Holly turn re-expression
and we’re gonna pass some null if that
condition yields false otherwise we’re
actually gonna have a fragment element
and let me bring it up here and I’m
gonna paste it over there okay and then
just a little bit let’s say the problem
so no if I actually select shoulders
that’s gonna show me the exercises only
for the shoulders by part and same thing
for everything else just arm select but
whatever the case might be but if it’s
all that’s gonna show me all of the
different exercises the other thing I’d
like to do is when we actually click on
the list item in the list I want to be
able to display the contents of that
exercise on the right tab over there so
how do we approach that know what’s
actually indent the list item text
elements over there the props and I’ll
also pass another property when I call
it on click and the on click property is
going to have a function which is going
to call and on select method it’s gonna
come from the properties and it’s going
to pass to the ID of the exercise of
course we’ll have the ID so we need to
restructure it from the exercise object
when we are looping through them so
we’re gonna call that property we’re
gonna pass the ID of that exercise which
is going to be selected and back in here
we of course need to provide that on
select and learn we’re gonna have a
handler as well so let’s go ahead handle
exercise selected we’re going to need to
create a method that’s going to accept
an ID and once we actually get the idea
we can call set state on it now what I’m
gonna set in the state is gonna be an
exercise and this exercise is going to
refer to the currently selected or
chosen exercise that we clicked on from
the list on the left and what we need to
do is we actually need to get that
exercise from the state and if you’re
familiar with the set state function
there’s actually a small copy
about it so if you go to the react
documentation let’s go to state and
lifecycle if you search for said state
you’re actually going to find a bit of
an information about it but specifically
we’re interested in the alternative form
of set state where instead of passing an
object that contains the new property
for that state it’s going to be merged
with the existing state we can actually
pass a callback that’s going to receive
the previous state as well as the props
and it’s going to return a new state
object that’s again going to be merged
so the reason for doing that is because
I don’t want to do I don’t want to
actually reference the state inside of
that state because the set state
function is asynchronous and something
else in the app might already changed
the state while I’m calling it so I in
order to avoid that situation I actually
want to get a previous state so the
state that we do have at the moment so
previous state and I’m gonna pass a
callback
now the callback is going to return an
object and inside of that object I’m
gonna create an exercise property and
I’m actually going to get the list of
exercises from the previous state so
previous state exercises okay now of
course in this case we just need the
exercises themselves so we can just
simply destructor them from the previous
state object like so let’s call the
exercises and I’m actually going to just
do find we’re going to loop through them
we’re gonna get an exercise object and
if the ID on that exercise object
matches the ID that’s been giving to the
method will then that the exact exercise
that’s being selected and we’re gonna
set it on the state finally we’re also
going to need to extract the exercise
object itself so this would be the
currently selected exercise that’s being
set on the state and we’re gonna throw
out that exercise and we’re also going
to pass it down to exercises itself so
the exercises component and index GS we
need to accept that exercise as well so
let’s include also and in fact in app GS
we actually need to set the exercise to
an empty object by default
and once we get that object we can
actually D structure all the different
props they were interested in so let’s
get the ID let’s get the title let’s get
the description as well okay and for now
we can actually indent this a little bit
so let me indent categories over there
and get rid of those spacings and the
exercise is going to be an object like
that so we’re gonna get the ID we’re
gonna have a title description and this
would go in a separate line as well same
thing here so these are the different
props they were gonna get now we can
have a ternary expression here so we
might say do we have an ID if so I want
to display the contents of that exercise
objects who are basically gonna display
the title over here instead of the first
element otherwise we’ll just display the
description but instead of HRE what I’m
actually gonna do is I’m going to grab
the welcome message and I’m gonna set it
as the default value of the title and
I’m also gonna grab the description so
this thing over here at the bottom and
I’m gonna actually use it as the default
value for the description so that we
don’t have to duplicate the to
typography elements and have a ternary
because it’s gonna just look ugly so I’m
gonna have the title in there and I’m
also gonna have the description over
here so let’s save the file and let’s
actually see what that gives us so by
default we get these two messages one is
welcome one is the description so those
default values that we set on the props
okay but if I do select an exercise I’m
gonna see the details for that exercise
being displayed on the right so now
you’re actually able to select the
exercise and see all the details for it
the only thing we’ll do though is
instead of having the on click on the
actual text itself I’m gonna have the on
click on the list item okay
and then adjust the spacing here let’s
bring that the primary back in there on
the top let’s get rid of the extra
spacing here and let’s say that so now
the functionalities basically the same
you click on the list item but for the
time being you don’t actually have to
click on the text specifically the text
that’s being displayed inside of the
list item text component you can
actually click on the list item itself
like that and that’s also going to
select the exercise from the list and if
you narrow it down to let’s say chest
exercises you click on it you’re still
able to select it same for arms now the
one thing though is we forgot to have a
key probably here and the key could
basically be the ID of the exercise for
the time being and I think we also
forgot the key on the fragment element
so I’m just gonna pass the group as the
key for that fragment object and that
should be fine because the group is
basically unique within the list of
muscle groups or body parts that we
defined in the store and last if you go
to the footer I think I forgot the key
property let’s not forget that and we
can also assign it to a group because
like I said a group is always unique so
this is basically it for the time being
in the next video we’re gonna create a
button that’s gonna allow us to add
exercises
we’re also gonna be able to add a few
other buttons for example to add it the
existing exercise once it’s being
selected from the list and we’ll add a
delete button that’s gonna allow us to
delete the exercise from a state on the
app component so lots of work to do I’ll see you next time
so we have a list of different
categories or basically muscle groups
over here being displayed in the footer
itself so what I’d like to do is I’d
like to add a handler for those
categories so when I click on something
and I select it I’d like to have a
callback function so if you in fact
let’s go back to the documentation just
so that I can show you what’s going on
here and the element that we’re using is
called tabs so if you go back in there I
think we use this specific example and
as you can see here there’s actually an
all change event listener so that’s
exactly we’re going to use back in here
I’m going to add it to the list and
let’s perhaps pass it from the GS
component let’s call it on select so
when a new category is being selected
I’d like to call that property that
we’re gonna pass on the footer on select
no we’re gonna create a new handler here
I’m gonna call it handle let’s quit
category selected I need to create a
method for that it’s gonna accept a new
category okay it’s gonna be an arrow
function and we’re gonna do instead of
that method we’re actually gonna set the
category on the state so you’re gonna
think of this category that’s being
passed as the current selected category
so for instance for now all are selected
but I also want to be able to select
that’s a chest or let’s say select legs
okay so we need to store that current or
selected category on the state as well
it actually added in this stage if we
wanted to for instance category by
default we can have it have to strain
but if we don’t do that if we basically
just extract it from the state or if we
try to do that right so it can use
destructuring again from a state
state this thing would be undefined
because there’s no such property on the
state at the moment and it’s perfectly
fine we’re still going to need to pass
it down to the footer though so let’s
pass down that category as a prop to the
footer okay let’s say that you know like
I said here we’re actually gonna get the
category string and we’re gonna set it
on the state now back to the footer we
are going to accept the category as well
it’s gonna come from the props so this
will be the current selected category as
it’s being defined on the state well the
problem here though is that we’re using
indexes right so the tabs component is
expecting an index rather than the
strain so the category would be
something like if we go back to the
store will be something like shoulders
or it might be something like arms but
the actual tabs component needs to have
an index so we need a way to transform
that train with that category into an
actual index so I’m gonna do is let’s
return all the markup for the time being
okay
the extra spacing there and what we’re
actually gonna do is I’m gonna have a
new constant and I call it index and
what we’re gonna do here is we’re gonna
say alright if we have a category but we
are actually going to find at that
category in the list of muscles and you
can think of that category is basically
a body part right we’re gonna find the
index on the muscles and we’re gonna
look through them we’re gonna get
another muscles object or you can call a
category or call it group okay and if
that group equals the category that’s
being passed from above then we know
that we get the index so for instance if
a category is being set to something
like the fact let’s actually set on the
state let’s set it to legs okay I’m
gonna say that when the category equals
legs we’re gonna be able to find legs
inside of the array that’s coming from
the store it’s gonna be the very last
element
over here and it’s index is actually
going to be 6 because we have seven
different exercises so it’s gonna be the
very last element and if we don’t have
category for any reason that we’re
basically going to default to index 0
now the thing here is when we have the
zero index that index is going to
correspond to the very first step okay
so for instance if I get legs my index
is going to be six however it needs to
be seven for new tabs because I already
have another tab on top of the other
ones so I actually need to increment the
index over here well let’s actually
remove the on change for the time being
let’s actually pass the index here let’s
save it and as you can see here the legs
already being selected but if file is a
tight arms of course that’s kind of
select the arm same thing chest for
instance right and if I remove the
category so right now we’re passing
undefined
down to the floor component and because
we have a check in place we’re checking
do we have the category if yes then find
the index and the muscles and then
incremented by one because like I said
we already have another tab over here on
the top otherwise the fault is zero and
that’s going to give us the element of
okay and finally let’s back the on
change handler
the one thing build the on select method
that we do pass from the Container
component over here well it’s actually
backed up by a method that expects a
category so it does expect an actual
string so beat arms would be legs but
what we do get in the on change method
once we do provide a callback is we
actually get an event itself but we also
get an index instead of the actual value
because in etabs are actually operating
with the indices now we can’t actually
provide a callback so this could be a
function for example and what we might
do is we might just simply call on
select and when we do actually call it
we might have a check that says well do
we have an actual index here and if it
does equal to the value of zero well
then I just want to pass an empty
because the category that corresponds to
all is not something that we have
defined in the store so we’re just gonna
pass an empty string otherwise I’m
actually gonna pass a category that
comes from the muscles and because I
have the index that just need to be
comment it by one so we need to reverse
the action then with it before over
there and we will find the element in
the muscles array and we’re just
basically gonna pass it up to the GS
component you have component as then we
see the category and the categories
gonna be set on the state now you could
do this in line but I do prefer to
actually extract it to a separate
constant function and we’re gonna do
perhaps on index select or something
like that let’s get rid of those curly
braces okay NATO function and we’re
gonna pass it down to you on a change
okay let’s say that and let’s see if it
actually works so now we should be able
to select a different category okay so I
click on shoulders that’s gonna select
the shoulders chest same thing and once
we get all of that category in out GS
I’d like to also pass it down to the
exercises component as well so we’re
gonna pass that property two exercises
back in in the FCS for the exercises
here we’re gonna accept the category
problem and we’re actually gonna do
inside of the math function over here
well we’re gonna actually display the
list if the category is set to something
that’s false e alright so this could be
undefined which is the case in the very
beginning when we create the up or it
could also be an empty string when you
actually select all from the list of
tabs okay or we want to display it if
the category actually equals in the loop
that we’re looping through at the moment
I’m gonna host Holly turn re-expression
and we’re gonna pass some null if that
condition yields false otherwise we’re
actually gonna have a fragment element
and let me bring it up here and I’m
gonna paste it over there okay and then
just a little bit let’s say the problem
so no if I actually select shoulders
that’s gonna show me the exercises only
for the shoulders by part and same thing
for everything else just arm select but
whatever the case might be but if it’s
all that’s gonna show me all of the
different exercises the other thing I’d
like to do is when we actually click on
the list item in the list I want to be
able to display the contents of that
exercise on the right tab over there so
how do we approach that know what’s
actually indent the list item text
elements over there the props and I’ll
also pass another property when I call
it on click and the on click property is
going to have a function which is going
to call and on select method it’s gonna
come from the properties and it’s going
to pass to the ID of the exercise of
course we’ll have the ID so we need to
restructure it from the exercise object
when we are looping through them so
we’re gonna call that property we’re
gonna pass the ID of that exercise which
is going to be selected and back in here
we of course need to provide that on
select and learn we’re gonna have a
handler as well so let’s go ahead handle
exercise selected we’re going to need to
create a method that’s going to accept
an ID and once we actually get the idea
we can call set state on it now what I’m
gonna set in the state is gonna be an
exercise and this exercise is going to
refer to the currently selected or
chosen exercise that we clicked on from
the list on the left and what we need to
do is we actually need to get that
exercise from the state and if you’re
familiar with the set state function
there’s actually a small copy
about it so if you go to the react
documentation let’s go to state and
lifecycle if you search for said state
you’re actually going to find a bit of
an information about it but specifically
we’re interested in the alternative form
of set state where instead of passing an
object that contains the new property
for that state it’s going to be merged
with the existing state we can actually
pass a callback that’s going to receive
the previous state as well as the props
and it’s going to return a new state
object that’s again going to be merged
so the reason for doing that is because
I don’t want to do I don’t want to
actually reference the state inside of
that state because the set state
function is asynchronous and something
else in the app might already changed
the state while I’m calling it so I in
order to avoid that situation I actually
want to get a previous state so the
state that we do have at the moment so
previous state and I’m gonna pass a
callback
now the callback is going to return an
object and inside of that object I’m
gonna create an exercise property and
I’m actually going to get the list of
exercises from the previous state so
previous state exercises okay now of
course in this case we just need the
exercises themselves so we can just
simply destructor them from the previous
state object like so let’s call the
exercises and I’m actually going to just
do find we’re going to loop through them
we’re gonna get an exercise object and
if the ID on that exercise object
matches the ID that’s been giving to the
method will then that the exact exercise
that’s being selected and we’re gonna
set it on the state finally we’re also
going to need to extract the exercise
object itself so this would be the
currently selected exercise that’s being
set on the state and we’re gonna throw
out that exercise and we’re also going
to pass it down to exercises itself so
the exercises component and index GS we
need to accept that exercise as well so
let’s include also and in fact in app GS
we actually need to set the exercise to
an empty object by default
and once we get that object we can
actually D structure all the different
props they were interested in so let’s
get the ID let’s get the title let’s get
the description as well okay and for now
we can actually indent this a little bit
so let me indent categories over there
and get rid of those spacings and the
exercise is going to be an object like
that so we’re gonna get the ID we’re
gonna have a title description and this
would go in a separate line as well same
thing here so these are the different
props they were gonna get now we can
have a ternary expression here so we
might say do we have an ID if so I want
to display the contents of that exercise
objects who are basically gonna display
the title over here instead of the first
element otherwise we’ll just display the
description but instead of HRE what I’m
actually gonna do is I’m going to grab
the welcome message and I’m gonna set it
as the default value of the title and
I’m also gonna grab the description so
this thing over here at the bottom and
I’m gonna actually use it as the default
value for the description so that we
don’t have to duplicate the to
typography elements and have a ternary
because it’s gonna just look ugly so I’m
gonna have the title in there and I’m
also gonna have the description over
here so let’s save the file and let’s
actually see what that gives us so by
default we get these two messages one is
welcome one is the description so those
default values that we set on the props
okay but if I do select an exercise I’m
gonna see the details for that exercise
being displayed on the right so now
you’re actually able to select the
exercise and see all the details for it
the only thing we’ll do though is
instead of having the on click on the
actual text itself I’m gonna have the on
click on the list item okay
and then adjust the spacing here let’s
bring that the primary back in there on
the top let’s get rid of the extra
spacing here and let’s say that so now
the functionalities basically the same
you click on the list item but for the
time being you don’t actually have to
click on the text specifically the text
that’s being displayed inside of the
list item text component you can
actually click on the list item itself
like that and that’s also going to
select the exercise from the list and if
you narrow it down to let’s say chest
exercises you click on it you’re still
able to select it same for arms now the
one thing though is we forgot to have a
key probably here and the key could
basically be the ID of the exercise for
the time being and I think we also
forgot the key on the fragment element
so I’m just gonna pass the group as the
key for that fragment object and that
should be fine because the group is
basically unique within the list of
muscle groups or body parts that we
defined in the store and last if you go
to the footer I think I forgot the key
property let’s not forget that and we
can also assign it to a group because
like I said a group is always unique so
this is basically it for the time being
in the next video we’re gonna create a
button that’s gonna allow us to add
exercises
we’re also gonna be able to add a few
other buttons for example to add it the
existing exercise once it’s being
selected from the list and we’ll add a
delete button that’s gonna allow us to
delete the exercise from a state on the
app component so lots of work to do I’ll see you next time
Please follow and like us: