right so let’s actually continue
building out the application so what
I’ll do is I’ll create a folder alkaloid
components as a matter of fact I’ll move
up gs2 components folder because that is
a component as well so I’ll have to
change and then should be components
with an S but once I change it thing
this is going to work still okay so what
I’ll do next is I’ll create another
folder and call it writers so when
writers are create and XJS this will be
a component as well so let’s import
react from react and for now I’m just
gonna keep it as a functional component
so let’s for default some crops this
will be a function and then you wrap it
with a fragment and once we do that we
also need to import the dragon from
react so now that we have a fragment
here I’d like to also have a list of
writers so as I said back in ab GS what
we do here is I basically have sort of
like a navigation bar at the top where
we can navigate between home as well as
writers but we’ll also have another
section below so we’ll just put an age
part this will be a horizontal line and
instead of that list I’d like to
actually map through the writers so I’ll
do writers map still writer and then
we’ll return a list item which will also
contain a link to the writer details
page but for now let’s just keep it as
an empty string and then let’s close the
tag inside of it is where we basically
put some of the other information this
would be typically the name of the
writer so let’s save it like that for
now of course this will break because we
need to import the writers
the virus because we do need to fast on
us props I’ll expect them to be provided
as new crops we can go back to app Jes
and at this point I’ll import writers
writers like that and then the one thing
we could do is we can switch from a
render to component so we could have the
component property and this will
reference the writers component that we
actually just imported at the top as a
matter of fact if I go back looks like I
made a typo here it should be writers
and then finally the link of wonders of
course missing so we need to import it
and it’s going to be a named import from
react rather than like that let’s say
that there should be no issues for now
but then of course if you click on
writers this is not going to work
because we don’t provide the writers
property which we do expect in the
writers component so the component
property is perfectly fine as long as
you don’t need to pass any properties to
that component but in this case we do
have to provide some properties so what
I’m actually going to do is I’m going to
switch back to render okay and I’m going
to provide a callback functions that
will expect the properties but then will
basically just render the writer’s
component like that we will expand the
properties that are being provided three
dots and then finally I’ll also provide
writers as the additional or extra
property so let me provide that and
let’s also intend this for better
readability and then of course we need
to extract them from a state
so let’s destructure them
from the state like that and they should
give us the list of writers so now I can
go back to writers instead of the name I
can actually provide the name of the
writer so well let’s actually extract
that from the provider object itself so
we’ll have the idea we’ll have the name
I’ll include the name as per the link
and then for the key on the list item
this will actually be the ID of hobby
writer now back in here if you go back
to objects there’s actually a reason
that I did include two key properties
like that if we go to writers and if we
do console.log of the properties let me
actually switch back to props here and
let’s actually just console.log them out
and then this will need to change to
props writers for the time being let me
go back now let me go to console so as
you can see here we get in output the
contains the properties for the writers
component but besides the writers
themselves which is the property that we
pass and objects over here and the
writers this is basically the list of
the writers that we set when the
component mounts besides those writers
we also get a bunch of other properties
such as history location and match
enough to go to match to actually find
the URL which is slash writers so I’d
like to attract that URL and I’d like to
actually include it as part of the path
on the link object so bring back two
writers that we had before and then I’ll
also have a match but then I don’t need
the whole matched object I just need the
URL itself and then the URL will
actually be included as part of the link
itself so I’ll use template shrinks here
so let’s include and the URL like that
it will have slash so we do need to
include the ID of the writer so we’ll do
ID like that
let’s say that and if we go back to the
browser hopefully there’s no Harris when
I click let’s say a no-show is going to
append slash social to the end of the
URL and that’s the same thing that’s
basically that happen for every other
letter as you might expect now will this
set up we can actually add another route
component like that and this rub
component will match the writers so will
actually include the URL itself as
before so let me put template strings
I’ll include the dollar sign the curly
braces like that and then here we will
match the writer idea like that
so this writer ID will be something like
Joseph Campbell or Osho whatever this is
basically going to be lowercase version
of the name of the writer okay so once
that path is being matched
I’d like to render another component so
put a render function and we’ll actually
have another component they’ll call it
writer and this one we do we need to
create it so inside of writers let me
create another folder writer and you
create another file I’ll call it index
pass and we’ll just do import react from
react okay we’ll do a sports the default
of a function that expects props and
that returns a fragment and inside of
that fragment we’ll probably have the
name what let’s also have the idea of
the author let’s say we’ll have a name
we will have description and we’ll have
the image and some of the other stuff
I’ll just keep it that way for now maybe
I’ll just drop this instead of
I’m not sure which actually included in
the text melting like that just for
safety I’ll just include them nested
inside of a data so I said that and the
other one is where we actually need to
import the writer from the writer file
like that and then finally we are
missing the route component from react
writer and then in writer I think I
forgot to include the fragment component
as well so I include that component also
so we don’t get any errors and then back
in here if I click on the name of the
writer as you can see here we do get the
dip below but we don’t actually get the
information about the writer and that’s
normal and natural and that’s because we
just simply hard-coded all that
information what I would like to do
though is for my properties I would
actually like to get the information
about that author so I’d like to get the
ID the name the description and only
other properties as well so we can do
inside of this render function is first
of all we’ll get some of these
properties so I do want to keep them
because we’ll have information like
location history all that itself so I’d
like to give them stone so I will spread
them out to the writer component like
that and then I will also spread some of
the other information now because we do
have the writers object what we can do
is we can pass the ID not in fact we do
have the ID as the parameter in fact we
just slow down for a second I’m gonna
save this and go back to the writers
will do is let’s do console.log let’s
have the match property on this props
just console.log that problem do that go
back and as you can hear let’s say I
click on Nietzsche when that happens as
you can see here we get some of the
information regarding the matched URL so
we get the URL itself we also get it
path and we get the params that contains
the ID of the author so at this point
once we get the idea we might convert
this component to a class upon it they
might have come when it did not and then
we might actually make a request to the
server to fetch that authored given that
we do have a valid ID of that author but
thing is we already have the writers
inside of our state and we actually do
have them inside a writer’s component so
the one thing you could do is you would
actually find the writer because we do
have the idea at this point where the ID
is contained within the props so let’s
do the following here I’m actually going
to spread something but what I’m gonna
spread is I’m actually gonna call
writers find so this will give us some
writer okay and then we’ll check if that
writers ID matches props match grounds
ID which is basically the property that
you would see in browser once you expend
the match objects if you go to match
grams right already that’s the ID that
we are interested in and this is how
we’ll be able to match it now in fact
instead of props we can actually be
structure it a little bit so I’ll just
stretch with a match it can kill the
props and let’s try to save that and
let’s also go back to the writer
actually put the ID here let’s put the
name with the description
so at this point there should be dynamic
and finally image output image like that
it should be the URL to the images and
that image also needs to be extracted
from the props so back in the browser we
get props is not defined I think I know
what’s going on
we forgot to remove the props over here
and of course you could keep them if
you’d like to have access to things like
history or location but for now I don’t
need them I just need the match itself
so keep it like that we’ll just have the
information about the running in fact
what I’m doing here is I’m basically
extracting the information of the
writers so that would be like ID name
description all that stuff and I’m
basically spreading it out on the writer
so that we’ll get that information in
the writer object itself so we don’t
have to do something like props writer
and then ID right we can just simply
extract those chronic props directly and
one last type of idea is instead of ID
we need to actually have writer ID
because that’s the name of the parameter
that we do pass inside of the router so
once you do save that and you can click
around on the front office here and
you’re going to see the information
about them of course we need to change
that I would so let’s actually have I’m
doing what they did I don’t want any
dares anymore we’ll make this an h1 tag
okay and I’ll include the name inside of
it disregard the ID for now then instead
of a paragraph of like the description
good and then also just the low Eglin
might have an h3 tag for example where
we might also include the information as
to when the author was born as well as
deceased if that’s the case
so let’s include those two props and
then I’ll have them just next to one
another like that and then in between
what I’ll do is the em-dash which will
create a dash in between
and then finally for the image let’s
include the image of the very top so
have the image tag like that the source
will be the image itself so paste it and
let’s delete all those other lines let’s
say that and then finally for the alt
tag we can just simply include the name
of the author like that so this should
look much better now it’s called back
and the only thing is on the image I’ll
go ahead and add a style tag this will
be an object we’ll say max width needs
to be let’s say 300 pixels let’s say
that go back and now when you click on
different authors you can see detail
information about them and you’ll see
different descriptions you will see
different dates and you’ll see the names
of the authors as well as the portraits
now the one thing though is if you go to
writers as you can see here we don’t
display anything and what I would
actually like to do is I’d like to
create another route just before the
other one so let’s create a route and
this will match the URL itself so
without anything else and it will
basically remember a simple message
where we might say let’s variety equal
that function we might say something
like each each one please select a
writer from above something like that
let’s say that
and in fact let’s maybe do a ch3 instead
of each one let’s say that so now the
problem of course is if you click on the
writer you’re gonna see that same
message at the top and we already came
across that use case the only thing you
need to do is to add the exact property
to the route like that let me also
indent few things here so that it’s
readable ok let me save that and now if
you go to writers you’re gonna see the
message please select a writer from
above and then once you do click on one
of the names from the list you’re
actually going to see the details about
that writer and then of course the
message is not going to be displayed
because we are not matching at the Arado
would not be matching it at that point
now you go back to home now you see the
home and you click on writers you know
we get the writers and then you can
basically navigate between them now the
next thing I would like to do is the
convention we have the store object here
and then what I’d like to do is effect
to add a new property to all of the
writers and that will be the ebooks a
list of books what this will allow us to
do is it allow us to display a list of
the books for each of the writers and
then we’ll be able to click on the books
and also see the related information
about those books and this would be a
great opportunity to work with a nested
routes and react router so I hope you
liked the video and I’ll see you next time
building out the application so what
I’ll do is I’ll create a folder alkaloid
components as a matter of fact I’ll move
up gs2 components folder because that is
a component as well so I’ll have to
change and then should be components
with an S but once I change it thing
this is going to work still okay so what
I’ll do next is I’ll create another
folder and call it writers so when
writers are create and XJS this will be
a component as well so let’s import
react from react and for now I’m just
gonna keep it as a functional component
so let’s for default some crops this
will be a function and then you wrap it
with a fragment and once we do that we
also need to import the dragon from
react so now that we have a fragment
here I’d like to also have a list of
writers so as I said back in ab GS what
we do here is I basically have sort of
like a navigation bar at the top where
we can navigate between home as well as
writers but we’ll also have another
section below so we’ll just put an age
part this will be a horizontal line and
instead of that list I’d like to
actually map through the writers so I’ll
do writers map still writer and then
we’ll return a list item which will also
contain a link to the writer details
page but for now let’s just keep it as
an empty string and then let’s close the
tag inside of it is where we basically
put some of the other information this
would be typically the name of the
writer so let’s save it like that for
now of course this will break because we
need to import the writers
the virus because we do need to fast on
us props I’ll expect them to be provided
as new crops we can go back to app Jes
and at this point I’ll import writers
writers like that and then the one thing
we could do is we can switch from a
render to component so we could have the
component property and this will
reference the writers component that we
actually just imported at the top as a
matter of fact if I go back looks like I
made a typo here it should be writers
and then finally the link of wonders of
course missing so we need to import it
and it’s going to be a named import from
react rather than like that let’s say
that there should be no issues for now
but then of course if you click on
writers this is not going to work
because we don’t provide the writers
property which we do expect in the
writers component so the component
property is perfectly fine as long as
you don’t need to pass any properties to
that component but in this case we do
have to provide some properties so what
I’m actually going to do is I’m going to
switch back to render okay and I’m going
to provide a callback functions that
will expect the properties but then will
basically just render the writer’s
component like that we will expand the
properties that are being provided three
dots and then finally I’ll also provide
writers as the additional or extra
property so let me provide that and
let’s also intend this for better
readability and then of course we need
to extract them from a state
so let’s destructure them
from the state like that and they should
give us the list of writers so now I can
go back to writers instead of the name I
can actually provide the name of the
writer so well let’s actually extract
that from the provider object itself so
we’ll have the idea we’ll have the name
I’ll include the name as per the link
and then for the key on the list item
this will actually be the ID of hobby
writer now back in here if you go back
to objects there’s actually a reason
that I did include two key properties
like that if we go to writers and if we
do console.log of the properties let me
actually switch back to props here and
let’s actually just console.log them out
and then this will need to change to
props writers for the time being let me
go back now let me go to console so as
you can see here we get in output the
contains the properties for the writers
component but besides the writers
themselves which is the property that we
pass and objects over here and the
writers this is basically the list of
the writers that we set when the
component mounts besides those writers
we also get a bunch of other properties
such as history location and match
enough to go to match to actually find
the URL which is slash writers so I’d
like to attract that URL and I’d like to
actually include it as part of the path
on the link object so bring back two
writers that we had before and then I’ll
also have a match but then I don’t need
the whole matched object I just need the
URL itself and then the URL will
actually be included as part of the link
itself so I’ll use template shrinks here
so let’s include and the URL like that
it will have slash so we do need to
include the ID of the writer so we’ll do
ID like that
let’s say that and if we go back to the
browser hopefully there’s no Harris when
I click let’s say a no-show is going to
append slash social to the end of the
URL and that’s the same thing that’s
basically that happen for every other
letter as you might expect now will this
set up we can actually add another route
component like that and this rub
component will match the writers so will
actually include the URL itself as
before so let me put template strings
I’ll include the dollar sign the curly
braces like that and then here we will
match the writer idea like that
so this writer ID will be something like
Joseph Campbell or Osho whatever this is
basically going to be lowercase version
of the name of the writer okay so once
that path is being matched
I’d like to render another component so
put a render function and we’ll actually
have another component they’ll call it
writer and this one we do we need to
create it so inside of writers let me
create another folder writer and you
create another file I’ll call it index
pass and we’ll just do import react from
react okay we’ll do a sports the default
of a function that expects props and
that returns a fragment and inside of
that fragment we’ll probably have the
name what let’s also have the idea of
the author let’s say we’ll have a name
we will have description and we’ll have
the image and some of the other stuff
I’ll just keep it that way for now maybe
I’ll just drop this instead of
I’m not sure which actually included in
the text melting like that just for
safety I’ll just include them nested
inside of a data so I said that and the
other one is where we actually need to
import the writer from the writer file
like that and then finally we are
missing the route component from react
writer and then in writer I think I
forgot to include the fragment component
as well so I include that component also
so we don’t get any errors and then back
in here if I click on the name of the
writer as you can see here we do get the
dip below but we don’t actually get the
information about the writer and that’s
normal and natural and that’s because we
just simply hard-coded all that
information what I would like to do
though is for my properties I would
actually like to get the information
about that author so I’d like to get the
ID the name the description and only
other properties as well so we can do
inside of this render function is first
of all we’ll get some of these
properties so I do want to keep them
because we’ll have information like
location history all that itself so I’d
like to give them stone so I will spread
them out to the writer component like
that and then I will also spread some of
the other information now because we do
have the writers object what we can do
is we can pass the ID not in fact we do
have the ID as the parameter in fact we
just slow down for a second I’m gonna
save this and go back to the writers
will do is let’s do console.log let’s
have the match property on this props
just console.log that problem do that go
back and as you can hear let’s say I
click on Nietzsche when that happens as
you can see here we get some of the
information regarding the matched URL so
we get the URL itself we also get it
path and we get the params that contains
the ID of the author so at this point
once we get the idea we might convert
this component to a class upon it they
might have come when it did not and then
we might actually make a request to the
server to fetch that authored given that
we do have a valid ID of that author but
thing is we already have the writers
inside of our state and we actually do
have them inside a writer’s component so
the one thing you could do is you would
actually find the writer because we do
have the idea at this point where the ID
is contained within the props so let’s
do the following here I’m actually going
to spread something but what I’m gonna
spread is I’m actually gonna call
writers find so this will give us some
writer okay and then we’ll check if that
writers ID matches props match grounds
ID which is basically the property that
you would see in browser once you expend
the match objects if you go to match
grams right already that’s the ID that
we are interested in and this is how
we’ll be able to match it now in fact
instead of props we can actually be
structure it a little bit so I’ll just
stretch with a match it can kill the
props and let’s try to save that and
let’s also go back to the writer
actually put the ID here let’s put the
name with the description
so at this point there should be dynamic
and finally image output image like that
it should be the URL to the images and
that image also needs to be extracted
from the props so back in the browser we
get props is not defined I think I know
what’s going on
we forgot to remove the props over here
and of course you could keep them if
you’d like to have access to things like
history or location but for now I don’t
need them I just need the match itself
so keep it like that we’ll just have the
information about the running in fact
what I’m doing here is I’m basically
extracting the information of the
writers so that would be like ID name
description all that stuff and I’m
basically spreading it out on the writer
so that we’ll get that information in
the writer object itself so we don’t
have to do something like props writer
and then ID right we can just simply
extract those chronic props directly and
one last type of idea is instead of ID
we need to actually have writer ID
because that’s the name of the parameter
that we do pass inside of the router so
once you do save that and you can click
around on the front office here and
you’re going to see the information
about them of course we need to change
that I would so let’s actually have I’m
doing what they did I don’t want any
dares anymore we’ll make this an h1 tag
okay and I’ll include the name inside of
it disregard the ID for now then instead
of a paragraph of like the description
good and then also just the low Eglin
might have an h3 tag for example where
we might also include the information as
to when the author was born as well as
deceased if that’s the case
so let’s include those two props and
then I’ll have them just next to one
another like that and then in between
what I’ll do is the em-dash which will
create a dash in between
and then finally for the image let’s
include the image of the very top so
have the image tag like that the source
will be the image itself so paste it and
let’s delete all those other lines let’s
say that and then finally for the alt
tag we can just simply include the name
of the author like that so this should
look much better now it’s called back
and the only thing is on the image I’ll
go ahead and add a style tag this will
be an object we’ll say max width needs
to be let’s say 300 pixels let’s say
that go back and now when you click on
different authors you can see detail
information about them and you’ll see
different descriptions you will see
different dates and you’ll see the names
of the authors as well as the portraits
now the one thing though is if you go to
writers as you can see here we don’t
display anything and what I would
actually like to do is I’d like to
create another route just before the
other one so let’s create a route and
this will match the URL itself so
without anything else and it will
basically remember a simple message
where we might say let’s variety equal
that function we might say something
like each each one please select a
writer from above something like that
let’s say that
and in fact let’s maybe do a ch3 instead
of each one let’s say that so now the
problem of course is if you click on the
writer you’re gonna see that same
message at the top and we already came
across that use case the only thing you
need to do is to add the exact property
to the route like that let me also
indent few things here so that it’s
readable ok let me save that and now if
you go to writers you’re gonna see the
message please select a writer from
above and then once you do click on one
of the names from the list you’re
actually going to see the details about
that writer and then of course the
message is not going to be displayed
because we are not matching at the Arado
would not be matching it at that point
now you go back to home now you see the
home and you click on writers you know
we get the writers and then you can
basically navigate between them now the
next thing I would like to do is the
convention we have the store object here
and then what I’d like to do is effect
to add a new property to all of the
writers and that will be the ebooks a
list of books what this will allow us to
do is it allow us to display a list of
the books for each of the writers and
then we’ll be able to click on the books
and also see the related information
about those books and this would be a
great opportunity to work with a nested
routes and react router so I hope you
liked the video and I’ll see you next time
Please follow and like us: