hello everyone we are going to build
this recipe application in react
so before we dive into it let me just
give you a quick demo of how it's going
to work
essentially it grabs the recipes from an
external api so this is what happens
when the page first loads
and then from there on we can search for
recipes so if i type in shrimp it's
going to give me the recipes that
involve shrimp and then if i type in
chicken it's going to give me the
recipes that involve chicken
from there on we can view the recipe by
clicking this view recipe button and
then it takes us to that recipe using
react router
once it's been loaded we can go back to
the home page by pressing this go home
button and it takes us back to home page
again using react router
now you may notice that the results that
we looked for are still there and this
is because we are using data persistence
to store our data locally
for this project you are expected to
have a little bit of knowledge of
javascript react and react router okay
so without any further ado let's get
started
alright so to get started i've already
created a project folder for you using
the createx app cli
so inside of this folder i've included
the css that i've written for this
project which lives right there so feel
free to take a look at it
and i've also installed the packages
that we're going to need for this
project so i've installed bootstrap and
i've also installed this react write it
down packet and these three they already
come built into a create react app
project
okay so i've i will link this project in
the video description so go and download
it
and once you have downloaded it just go
ahead and navigate to it in your
terminal
type in npm install to install the all
the packages and the node modules folder
and once you've done that just type in
npm start or yarn start
to launch this project into your web
browser
okay so
come on
this is what we're going to start with
it's just a blank screen with basically
a header and a title that reads recipe
search
and this is what's going on in this
app.js file
okay so
as you know
we're going to type in the values well
the names of the recipes to search for
them
so how do we actually search for recipes
well we need the input form so to do
that let's just first create a new
folder in this source folder
and i'm going to name it components
within this components folder let's just
create a new file and call it form.js
all right in there first things first we
need to input react from react
and then i'm going to create a stateless
functional component and i'm going to
call it form
and it's going to be a stateless
functional component because we don't
need any state in this component so if a
component is a needed state that means
we can make it a stateless functional
component and not a class-based
component
all right so
i'm just going to implicitly return some
jsx so inside of it i'm going to create
a form
come on
and we don't need the action so inside
of this form let's just create a new
input
the type of text let's get rid of this
id and the name for now
and i'm also going to create a button
that says search
and before i forget let's just go ahead
and export this right here at the bottom
so export default
form
excellent now let's go back to app.js
and input this so import form
from
and then we need to
stay in the same directory go into the
components directory and then import
form
all right so let's just render it out
right there just below the header so
there we go
let's go back to the web browser and
make sure that it's showing up yes it is
so
let's just create a
method inside of this component and hook
it up to this form.js because
we need to first make sure that
everything is working correctly so i'm
going to call this method get recipe and
this method is going to be responsible
for making the api call okay
and let's set it to a arrow function
now this syntax may look a bit weird to
you you may be used to seeing something
like
a constructor function
and then inside of it you basically type
in your methods like this
and then you have to hook them up in
your constructor function like
this dot get recipe equals
this
dot get recipe dot
bind and then you bind in your methods
whatever
well this has been
removed or you can say that deprecated
in react-16 so essentially in react-16
you don't really need a constructor
function you can even declare your state
without a constructor function just like
that
okay so this is just a neat bit of
syntax in the new version of react and i
think this is much better and much more
practical than the previous versions
anyway getting back to the topic
first of all let's just
console.log something into this method
just to make sure that it's working fine
so i'm just going to console.log saying
working
but how do we hook it up to this form
component
well we first need to go ahead and pass
this
data to the sum component and how do you
pass data to another component you use
props
so i'm going to name this prop the same
as this method so i'm going to say get
recipe equals this so this refers to
this app component and then this dot get
recipe okay
press save
now back in form
we do have access to this get recipe
prop because we set it up right there
but to access it we can't really use the
this
dot props approach because
this keyword only works in class-based
components but this is a stateless
functional component which means we have
to pass an argument right there
called props
now with this props
refers to
these right there so whatever get passed
in there
gets stored into this argument
so this prop is basically an object so
to access the properties of an object
you type in
well props dot and then whatever the
name of the property is
now in our case we are going to set up
an attribute called spawn submit which
is a built-in react react attribute
and then we can say props
dot and then the name of the prop is get
recipe so let's just copy it and place
it right there
excellent
press save app.js
and now what do we want well we want
this console.log to show up as soon as
we press this button so now if i open up
my developer tools go to the console
press search
oh what's happening there well keep your
keep your eye right about there as soon
as i press the search button keep your
eye there
did you see that that working console
log appeared for like just a split
second but then it disappears
and this is because we are going through
a full page refresh
this this full page refresh is the
default behavior of any web page and to
change that all we need to do is we need
to pass in an argument e actually let me
just convert that to a
arrow function first
so i don't have to bind it
so this e is basically the event object
in javascript this is nothing specific
to react
so
since this is an object means we can
access the properties of this object so
i can say e dot prevent
default
and this method is going to prevent the
default behavior of this web page which
is what that is going to refresh so now
if i press save go back to the web
browser
press search we can see that the working
console log is showing up brilliant
okay well what do we need to do next
well we need to first let's just
let's just um make sure that we are
actually reading the values that we type
in there
so
first of all we need to
set up a name attribute because this is
what we're going to use to read the
values from the input okay so name and
i'm gonna name it
recipe or let's just call it
recipe name
okay i'm gonna copy this
and within this get recipe method i'm
going to create a new constant and i'm
going to call it same as that recipe
name equals so again this event object
means we can read the properties from it
so e
dot target
dot elements
and then what do we need to access well
we need to access this name attribute so
what's the name of this name attribute
it's recipe name
so e dot
target.elements.name
dot recipe name and then what do we need
to access from it we need to access its
value so doc value okay
now instead of console logging this
working string let's just actually
console.log this recipe name constant
that we just created
right so let's go back to the web
browser and type in anything type in
chicken press search and there we go
this is working just fine
okay now let's get into some more
interesting stuff
we need to
make an api call to a website and then
we are reading the data from the website
and showing up to our web application
and what's the website that we need to
make the api call to well is this recipe
api called
food to fork
that's kind of a weird name but food to
fork dot com
slash about slash api
now you can read this
but for the most part all you need to do
is you first need to sign up for the
website it's completely free and you
need to obtain
an api key
because you need that in order to work
with their data
essentially an api key is a way for
websites to know who you are and what
kind of data you're trying to access so
they they use your api key that are
associated to your email address and
then they just basically want to know
what kind of data you're trying to
access
that's the whole purpose of
obtaining the api keys okay so all you
need to do is just press the sign o
button and then it will redirect you
back to this page once you have got your
api key
so the url that we need to make the api
call to lives right there
now see this is the url that we need and
see this key parameter right there
this is where your api key should go
so
once you have done that your url should
look something like this right there see
this is the exact same api right there
sorry this is the exact same url
apart from the fact that this api key
variable has been replaced by my actual
api key so all i did was i first signed
up
then i copied this url i pasted it right
there
and then instead of this api key wrapped
within those curly braces i just pasted
my api key right there and what i've
been looking for by default we are
looking for this shredded chicken and
these are the results that we are
getting back and you may also notice
that there's also this count parameter
right there and we can change that we
will do that later on in the video but
we can change that to anything we can
change that to 5 10 15 whatever you like
it just depends on how many results you
want to show so in this case the count
is set to five which means we are
getting an array of recipes and this
array has five different objects and
then you see that these are the
properties that we're going to read in
order to access the data so this
publisher title recipe id just some of
these we're going to use in our web
application
okay so let's actually go ahead and copy
this url
okay
go back to our application
and
i'm actually going to just go ahead and
create a new constant
but
all i'm going to do there is i'm first
going to
extract my api key because i'm going to
store that in a new constant so
there we go
because it's always a good practice to
just
store your important data into your own
constants in case you need it later on
okay
and i'm just going to go ahead and
create a new string and paste my api key
right there
okay so once that's been done we are now
ready to make the http call to this url
right there
so
to do that i'm first going to go ahead
and put this link out
just like that
and inside of this get recipe method
just below this prevent default call i'm
gonna create a new constant and i'm
gonna call it api underscore call
and for now i'm just going to go ahead
and initialize a string and inside of
that i'm going to paste this link right
there
that doesn't seem right
let's just fix that there we go
okay so
we're gonna make use of something called
async await and the fetch api to make
the call to this link right there so how
do you initialize a async await function
or in this case how do we make this
method asynchronous
well
just before we declare the method we're
going to type the keywords async okay
and
then
right there we're making the api call we
type in the keyword of eight
and to actually make the http call we're
gonna use the fetch api so to do that
i'm again going to go ahead and cut this
link out
and i'm going to type in the keyword
fetch
and within that
instead of initializing the string i'm
going to use the es6 template literals
so to do that is just using the
backticks and then i'm going to paste
the link right there
so we need to change a couple of things
now because remember we have our api key
stored in this constant right there so
in es6 template literals
we are allowed to inject the variables
inside our string so to do that we're
going to go ahead and copy this api key
constant
and we're going to inject it right there
where the key is required so to insert a
template neutral all you do is you type
in the dollar sign
and then a couple of
uh curly braces and then whatever goes
inside of these curly braces it
basically what we want to do so in this
case we just want to inject this api key
variable so again i'm just going to go
ahead and copy this and paste it right
there
and what do we need to do next well
the default
search for now is just shredded chicken
right there
later on we will change that to whatever
we type into our form but for now let's
just leave it to shredded chicken
okay so i'm actually going to get rid of
this console log right there because we
don't need that anymore
so
this is just making the api call it's
it's not actually grabbing any kind of
data so to do that i'm actually going to
create a new constant and i'm going to
call it results or let's just call it
data
and we're going to set it to the return
value of this fetch function right there
so again to grab the value we're going
to first type the keyword await
okay
and then
we also need to convert this whatever we
get back from this api to a json format
so you may be used to seeing something
like you know
json.parse or json.stringify
but what's how clean this is in fetch
api all you need to do is you need to
type in the contents name which in our
case is api call and then we just call
the json method there we go just like so
okay so now whatever we get back from
the api
is going to be stored in this data
constant right there
so
let's just check what's inside of this
data constant so
if i console console.log this data
object now remember
this method is going to fire as soon as
we press this button right there so now
let's just go back to our application
and
press search
what's that
no access control allow origin
some websites do not allow local servers
to access their data now in our case
we are using our localhost 3000 to
access the data from this food to fork
website
so we need to do something to trick this
food to fork servers into thinking that
we are a legitimate website so in other
in other words we are live on the
servers
so how do we fix that
well there's a very handy tool for that
it's called course anywhere.heroku.com
so all we need to do is we need to go
ahead and copy this url
okay
and go back to our application and just
before our link begins we just prefix it
with this url that we just copied right
there
all this is going to do is it's going to
trick this website into thinking that
our server which in our case is
localhost this is actually a live server
that lives somewhere on the internet
okay that's all this url is going to do
so now if i press save and then go back
to our application
press it and hopefully this should give
us some sort of data and yes it does
so this essentially is an object and the
value of that is this data constant
right there
so if i expand it
this is the count so remember we get an
array of five objects because we have
set the count to five so if i change the
count to let's say 10.
let's see what we get back so press
search
and there we go we get an array of 10
objects so let's just go ahead and crack
open this recipe array and let's take a
look at what's inside of this well it's
basically
like i said it's an array and inside of
that is
just a count
of objects so that count is what we type
in right there
so let's just crack open the first one
so these are just a bunch of properties
that we're going to use
in order to display the data on our
website so
what do we need here
well
to actually access this data what we
need to do is we need to drill down into
this array first this recipes array so
we're going to have to say something
like data
so
remember data is this whole object so to
drill down into recipes we have to say
data dot recipes
and now if i console log this we get
back the array that we need so this is
the array and
let's just say that we want to go to
this first element in this array so i
can say data so again
to
access
a number in an array you use the index
in this case it's zero so
we want to access the first element and
inside of this and inside of that let's
just try and access
this recipe id so let's just copy that
and paste it right there
and let's see what we get back so press
search
and there we go we get the recipe id
back
but this isn't what we want we actually
want to display the data on our actual
web page which is this whole thing right
there
so how do we do that well let's take a
look
so to actually display this piece of
data we don't really have anywhere to
store that inside of
so we do have this constant called data
but this only exists inside of this
method
so now would be a good time to introduce
state within our application so to do
that
it's just going to type in the keyword
state
and
i'm just gonna set it to an empty object
now again
you might be used to doing something
like typing in a constructor
and then declaring your state like that
but like i said in
react 16 and further on you don't need
the constructor function at all so you
can just delete that all together
and what you can do is you can just
simply declare your state like that
so what kind of state do we want to
trace
what we want to do is we want to set up
an array which is going to
store whatever we get back from the api
and what do we get back we get back an
array so to do that let's just create a
first piece of state called recipes and
set it to an empty array
excellent
now how do we actually make use of this
state right there well instead of
console logging this piece of data right
there
let's just do something else
let's just use the built-in set state
method
to set this piece of data to this
recipes array so to do that i'm just
going to say this
dot set state
and it's going to take an object and
within there we want to grab the recipe
state and we want to set it to data
just like that
okay so now instead of console logging
once we get back from this data let's
console log
this piece of state right there so
console.log
and this dot state dot recipes
okay let's go back to the web browser
open up our console
press search and we should get back our
piece of state
and that we do and inside of this piece
of state we have an object and then
inside of the object
uh is this recipes array right there so
all we want to do right there is we only
want this array right there so to do
that let's just say
data dot and then is this recipes array
right there because we want to set this
recipes array to this recipes area right
there okay so data dot recipes
there we go
go back to the web browser press search
and now all we get back is an array and
within that array there's just a bunch
of objects
so
this is all well and good but how do we
actually display this data onto our
actual screen
so to do that let's just do something
more
interesting
for now all i'm going to do is i'm going
to open up a javascript expression right
there which means
and by the way in jsx opening up a pair
of curly braces means that you want to
inject something that is related to
javascript okay so to do that
i'm going to make use of an array method
called map
now map is a new method that was
introduced in a later version of
javascript and essentially it allows you
to go through
each element inside of an array and then
you can manipulate it you can change it
anything you want to do with it so it's
kind of like the for each method but
in gsx we can't really use the for loop
or the for each loop so we're gonna have
to make do with what we have so what we
have here is the array method uh
array.map method so in this case the
recipe state is an array so all we can
do is we can say this dot state dot
recipes
and then we call in the method called
map
and this method takes a callback
function
so let's just give it a callback
function and we also give it a argument
right there
an argument i should say
or a parameter
and this parameter is going to contain
each of the elements that are inside of
this recipes array once the state has
been set
so let's just call it a individual
recipes just like that
and then
within there let's just return a
paragraph that says and again
since we're going to make use of this
javascript thing inside of this jsx
paragraph tags we have to introduce
curly braces
so what do we want to access well for
now
let's just say recipe
and
then let's just crack open one of these
and recipe.title
for now let's just console let's just
print out recipe.title so remember
it's going to print out 10 different
titles on the screen because it's going
to loop through each of these elements
right there and the number of them is 10
so we're going to get 10 titles printing
out to the screen
okay so again press save
go back to the web browser there are no
errors which is good so now if i press
search i should get some titles onto the
screen
yes we do this is brilliant but we also
have an error
it reads each child in an array or
iterator should have a unique key prop
and this error is something to do with
react
essentially it's asking us to set a
parameter called key to each of these
elements that have been looped over
and the reason for this is that react
wants to know what each of these
elements are i mean there is no way for
react to know what this title is what
this title is all it's doing is it's
reading the properties of each of the
objects right there
but it also needs to know
that in future in case we need to
manipulate any of these so react can
just grab the key prop and then from
there it can do its thing so to do that
all i'm going to do is i'm going to set
this recipe id which is this right there
i can also set the title or the search
url as long as it's something unique and
different to compared to the other
objects it will do but just for the sake
of simplicity i'm gonna copy this
and i'm gonna say that key equals and
again i'm gonna have to open up a
javascript expression and inside of this
i'm gonna say recipe
dot
recipe underscore id
now if i press save and go back to the
web browser press search
we can see that all the titles are
printing out to the screen and we also
don't have any errors uh this is just a
eslint complaining that recipe name has
been declared but it's not been used
and this isn't really something to worry
about so let's just move on
so currently
we are just getting the default value
which is this shredded chicken right
there but what we want to do is we want
to get the results
of whatever the user types into this
input form right there
so to change that we already have a
value from that form which we grabbed
earlier on using the event object so all
we can do is we can use this recipe name
constant
and like i said this is a template
string so we can actually inject this
variable right there instead of this
shredded chicken so what i can do is i
can just cut this out
okay
and
then to open up a template literal you
type in the dollar sign followed by a
pair of curly braces and then within
there we can inject this variable right
there just like that
okay press save
go back to the web browser and now if we
type in let's say shrimp press search
and we are indeed getting the results
that involve shrimp on the screen as
well as in the console right there
okay so what's next
so let's actually grab a bit more than
just the titles
so if i just crack open one of these
objects right there
uh we can use a bunch of properties
there so what we're gonna use is we're
gonna use this title which we already
use
and we're also gonna use this
publisher name
and we're also gonna use this image url
but for now let's just throw in this
image and see how it goes so i'm just
going to go ahead and copy this
i'm going to go back to our application
and instead of just returning this one
single paragraph let's
actually just cut it out open up a pair
of parentheses
and inside of it let's create a div
throw in that paragraph tag and let's
also add in a image tag just above this
paragraph sag so
and the source is going to be actually
this recipe dot and then the image url
so
as always to open up
a
javascript expression you have to throw
in a pair of curly braces and then
recipe and then image url so
what kind of description do we need to
give it to this image tag well we can
just throw in the title there just like
we did
right there so we can say again to
initialize a javascript expression come
on
we have to first open up a pair of curly
braces and then recipe
dot
title
excellent now if we go back to the web
browser
and press search let's look for pizza
this time
and we should get back the images they
look hideous at the moment but we will
fix that
so
why is this giving an error again uh
this
key prop error
even though we have already passed the
key right there
well the error here is that the key has
to be passed within the most parent
element
so what's the most parent element in
this case well it's this div right there
so i'm just going to cut this out
and paste it right there just like that
so now if you go back to our application
press pizza and
yeah it's working out fine but it's
looking rather hideous at the moment so
we're gonna fix that next
so to do that we're gonna make use of
bootstrap which i already have included
in our package.json and as well as our
index.js file right there
so to make use of bootstrap
we're just going to add a bunch of
classes from the bootstrap framework
but before we do that let's take care of
this piece of code right there
all we are doing there is we are mapping
over this piece of state right there
but this is a bit messy i mean we don't
want to do that in our app component
so to take care of that let's just
transfer this into its own component so
what i'm going to do is i'm going to
create a new component in the components
folder and i'm going to call it
recipes.js
okay
once i'm in there it's gonna import
react from react
after that let's just create a stateless
functional component because again we
don't need any state in there so we can
make this a stateless functional
component so to do that i'm just gonna
call it recipes
and i'm going to set it equal to an
error function and i'm going to
implicitly return some jsx
so first of all i'm just going to return
it div and within this step for now
let's just type in recipes just to make
sure that it's working
and right there let's just export
defaults at the bottom
excellent now let's go back to our
app.js file
and just underneath this form component
let's import the recipe so import
recipes from
and then it's the components directory
and then
recipes
okay so
i'm actually going to cut this out
and i'm just going to go ahead and
render out a recipes component
press save go back to the web browser
and we do have our recipes component
showing up
okay but we don't want it to just render
out this text
we wanted to actually display the data
that we were previously getting so
how do we do that
well
first of all we need to pass this state
this recipes array
to this recipes component and then
in this inside of this recipes component
that is where we're going to map over
that piece of state right there
so how do we pass this piece of state to
our recipes components
well as always to pass anything inside
of react you have to use props
so to do that i'm just gonna pass a new
props and i'm gonna call it recipes okay
and and i'm going to set it to this dot
state
dot recipes
excellent
so
now this prop means that we do have
access to our recipe stage that lives
there
so now back in recipes.js file
to get access to this prop right there
we first need to pass in an argument
right there called
props because this is the only way we
can access the props we can't really say
something like this dot props dot
whatever because this keyword will not
work inside of this jsl that lives
inside of this error function okay
if it was a class-based component then
we could have used it but in stateless
functional components there's no way we
can access the props using these
keywords
okay so
now how do we proceed with our
recipes props well it's the same as what
we did right there so i'm actually just
going to paste the
piece of code that i copied that i cut
earlier and all i'm going to do with in
there is i'm going to get rid of this
keyword
and i'm also going to get rid of this
state because the state does not exist
in this component
instead i'm going to type in props
and what's the name of the prop is this
recipe so
props
dot recipes and then is the exact same
thing that we have been following
so again let's just break it down
we passed the props property uh you
passed the props argument that props
argument has access to this recipes prop
right there and then inside of this
inside of this div all we are doing is
we are mapping over
this piece of state
right there and this gets filled once
this search recipe button gets called
okay and then once that's been called
that means that this this prop has
access to this piece of state right
there which means we can actually map
over inside of another component and
that component right now is this recipes
components
okay a lot of talking
now let's save the file go back to the
web browser and see if that works
let's just open up the console and let's
look for chicken
press search
and we are indeed getting back 10
different values
sorry 10 different recipes for the
chicken
and this is brilliant
so now that we have taken care of this
recipes component let's go ahead and
actually style
our application because it it looks very
ugly right now
so
let's continue with that
so when i say styling
i mean that i'm just gonna add a bunch
of css properties that i've already
declared
inside of this app.css file so if
something doesn't make sense to you
then i've named these classes very
appropriately so just have a look at
this file and it should make everything
clear to you
and like i said before i've already
installed bootstrap into this project as
well
and this is being imported right there
inside of this index.js file and we're
gonna make use of bootstrap as well
okay so we're not really gonna make any
changes to this app.js file
instead let's just first open up this
form.js file and this is where we're
gonna get started with our styling
okay so
the first thing that i'm gonna do here
is i'm gonna add a style attribute right
there
and this takes a javascript expression
and then inside of it you can declare
declare an object
and then there you can define your
styles
so the first thing that i'm going to do
is i'm going to declare a margin button
okay and i'm going to set it to
to ram
okay
now next step i'm gonna do is
press save
and i'm gonna give this input a class
name of
form underscore underscore input
copy that
and i'm going to give this button a
class name of form underscore underscore
button
brilliant let's just go back to our
application now and we can see that
those styles are being applied
okay now
for the main styling we're going to stay
in this recipes.js file so
right now it's very simple but we're
gonna completely transform this
structure right there
so what i'm gonna do is i'm actually
going to go ahead and put this whole
thing out
just like that
so start with the div okay so this div
is gonna act as a bootstrap container
okay
and inside of this div let's just throw
in a row
okay now next up
what do we need to do well this is where
we are going to throw in our map
function
okay
so to do that let's just
let me just take a look at what i'm
doing here because
this tutorial is not scripted so i just
really need to be careful
with the classes so i don't mess
anything up anyway
so
i need to add
the bootstrap columns so what would be
the best place to do that
well
this is one individual
div that's being rendered out to the web
browser so that means this would be an
ideal place to throw in the bootstrap
column class okay so to do that i'm
actually going to cut this whole thing
out
just like that
create a new class and i'm going to call
it call
md-4
excellent
so now
let's just go ahead and open up this div
and inside of this div let's also throw
in an other class name and call it
recipe underscore underscore box
brilliant okay let's carry on and
what do we need to do next
well seeing as we are mapping over we
are throwing in this div inside of this
map function that means we get we have
access to every property that this
recipe has
so the first thing that we're going to
do is we're going to throw in an image
tag
and the source is going to be again
recipe dot
i believe it was image underscore url
and the alt was
recipe underscore the recipe dots i
believe it was title yes it was
okay what's next well let's also give
this image a class so i'm going to say
class name
and i'm going to set it equal to
recipe
underscore underscore box
and then it's img
let's just break these attributes down
to their own lines just so it's a bit
more clear
okay let's indent that in
let's get rid of that there
okay so what's next well after the image
stack let's just go ahead and underneath
this image tag let's open up a div
and call it recipe
underscore underscore text
okay inside there what are we doing
well
let's open up a javascript expression
because this is where we're going to
throw out our recipe title
so
let's just say recipe
dot title
okay
and let's wrap this inside of a h5 tag
just so it looks like so it actually
looks like a title so recipe
come on on this recipe.title
okay let's just take a look at how it's
looking like so far well it says rvc is
not defined so line number 12
and yep of course it's not defined so
press save and go back to the web
browser
let's just close that for now and press
pizza search and see what we got back
well we are getting stuff back but it's
not looking very promising at the moment
so let's just go ahead and fix this
so the source for this tag is of course
this image url so i typed in img
anyway let's take a look at it now so
pizza search and this is looking much
better now
okay
well what is next
well let's also grab another property
from this array
called publisher
okay this one right there and again it's
complaining about that key prop and we
will pass that in a moment in fact let's
just do it right now so
what's the most parent div is this
component right there so sorry this div
right there so let's just say the key
equals recipe
dot title
and that should fix it
and while i'm here let's also give this
each of the columns a
bit of spacing towards the bottom so i'm
going to say style
equals
and then an object
that says margin bottom
is let's just give it to ram
okay press save
so what is next
well we were going to throw in the
publisher so to do that
let's just um shall we throw in a
paragraph tag right there yeah staying
inside of this div let's just throw in a
paragraph tag
and
give it a class of
recipes
underscore underscore title and let's
also copy this class and paste it right
there
and this should be title and this should
be subtitle okay
so let's open let's just type in
publisher so this shows up
and then
let's throw that in a span tag so span
and then inside of this pen what do we
need to do well let's just open up a
javascript expression and type in recipe
dot publisher
okay
so what is next
so we're also going to add a button
which we can click and then we get taken
to the recipe and we will hook that up
using react router later on but for now
let's just go ahead and add it so
below this
come on this recipe underscore text div
let's just open up a a button tag
okay
and call it for now let's just call it
view recipe
and give it a class of
recipe underscore underscore button
brilliant now let's go back to our
application and this should look the way
we want it to look
okay it's looking promising for the most
part but i still kind of don't like the
way it's looking so i probably mistyped
something
so i think the class name is recipe
buttons actually
it is
and
this should be recipe text
and it should be recipe this should be
recipes box okay my mistake
okay let's go back to our
application
again press search
okay this is looking good but again it's
not perfect
and i'm pretty sure that i'm typing out
the class names
somewhere wrong
so
it's recipe underscore underscore
buttons
actually i think i just typed one
underscore right there so now if i press
search
there we go this is looking much better
now
so
see i don't like how
some of these boxes are
longer in height and some are small in
height so let's just type in something
else so chicken
see
notice that you know
when the name gets longer the box itself
gets longer as well so how do we fix
that
well let's just make use of something
inside of something very handy inside of
javascript so to do that we're gonna do
this inside of this recipe title
so we're gonna make use of a javascript
method called substring
so
it's better to explain it while we do it
so let's just open up let's just expand
this h5 tag right there
let's put that in a separate line
and right there what we're gonna do is
we're gonna say if recipes dot title
okay so
dot length
so remember this is a string and
strings in javascript have a property
called length
so we can check that if recipe or title
dot length
is smaller than 20
okay
so we're using the ternary operator
right there so it kind of works like if
else statement but we can't really use
if else statements inside of jsx so
we're gonna have to make do with the
ternary operator
okay so if
recipe title dot length is smaller than
20
then this question mark refers the
then clause inside of the if else
statement then what we want to do is we
want to open up a template string and
inside of it we're just going to render
out a recipe
oops that's not how it should be
it should be like that we're going to
render out just the recipe or title as
it is
so if
that the length of the title is less
than 20 characters then we are just
going to render out the recipe title
just as it is okay
else so this colon stands for else so if
this condition isn't true
then this is what's going to happen so
else let's open up a
template string again
else
recipe
dot title
dot and this is where we're going to
make use of the substring method inside
of javascript
okay so this essentially takes a couple
of arguments the first one is where it's
going to start
and the second one is where we want our
string to trim
so if
the length of the title is smaller than
20 characters that means it can fix
inside of just one box
if it's greater than 20 characters which
this one is what we can do is we can cut
it down to just 25 characters so to do
that we need to start with the first
index the so the first letter which is
right there and the index of that is
zero so zero and then we just want to
trim it down to 25 characters so this is
what the second argument is going to be
okay so once it's been done
once the character has been trimmed
let's also give the user some kind of
feedback that this string is longer than
it's appearing out to be so to do that
let's just type in three dots right
there okay
go back to the web browser
again search for chicken press set
and now we can see that the titles that
are longer than 20 characters have this
kind of a nice
you know three ellipses showing up right
there
and
those titles that are smaller than 20
characters they're just showing in their
full length and this is exactly what we
wanted to do
okay
so let's continue
okay so now we're gonna add react router
to our application
more specifically we're gonna make this
view recipe button work
okay so to do that we're obviously gonna
need react router and i did tell you
earlier that i already have installed
the react router packet so which lives
right there
okay so
what we're going to do for that is we're
going to create a new component inside
of this components folder
and we're going to call it
router.js this component is ultimately
going to replace this app component
which lives which currently lives inside
of this index.js file and this is what
we're going to render out to the web
browser
okay so what do we actually need inside
of this
router components well obviously we need
react so import react from react
and we're also going to grab a bunch of
named exports from this react write down
package so we're gonna grab in fact
let's just um first say import and then
react router dom
and then we can type in the property so
we need browser router
we need switch and we also need
what do we need
route okay
if you are new to react router then i
highly recommend you first learn about
react router and i do have a video for
that on my channel
so go check that out it will give you a
basic idea of react router and how it
works
okay so
now you may notice that
this new update in vs code it basically
doesn't give you any highlighting unless
you use
the variables that you are using in your
application so let's say that this
reacts it's it's not highlighted it's
usually in colors and the reason is
appearing this dim is because we haven't
used it yet
so this is a nice way of vs code or to
you know tell you that this is the stuff
that you haven't used yet so use it okay
so now if i just create a new
component and i'm going to call it
router
and i'm going to set it to a stateless
functional component and let's just make
it return some
jsx
so now as soon as i create this div
you can see that this line gets
highlighted and this is because react
has uh and this is because vs code has
told us that you know this this thing
right there has been used but we haven't
used any of these properties yet so this
is why they are still appearing gray
okay coming back to the topic so
we don't actually need this div what
we're gonna do is we're gonna wrap
everything inside of this browser router
so i'm gonna place it right there
and inside of it what do we need well we
need our routes so to throw in our
routes we just type in route
and it's a self-closing tag and inside
of it we add a component attribute
and we also add a
i believe is path yeah but i think that
comes before the component so path
equals and anything that that goes
inside of it
okay so how are we going to structure
this
well for the home component which
obviously gets represented by this
forward slash
so if the path is this forward slash
then we are going to show up our app.js
components so app.js is obviously this
whole thing right there
so to do that we first need to import
our app component so import up from
and then we need to jump up our
directory and then this app
so if the compo if the path is this
forward slash then show us this app
component and we're also going to add a
new route and that route is going to be
that individual recipe whatever we click
on
so we don't really have any component
for that yet but for the time being
let's just create a new component and
call it recipe now
pay attention this is recipe and this is
just an individual recipe okay it's very
easy to make mistakes so just pay
attention right there
create a new components input react from
react
and then just create a stateless
function component for now anyway and
let's call it recipe
and set it to another function
and let's just implicitly return some
jsx
okay dev and let's just type in
recipe
component
and export this right here at the bottom
so export defaults
recipe excellent
now
we need to actually input this into our
router because this is what we're going
to use in order to render it out
so import
recipe
from
and then it's in the same directory so
recipe right there
okay i'm just going to duplicate this
line
and i'm going to say that if so what
what path do we need
well it's going to be
a bit more complicated than what we're
used to but
for now let's just throw in the path
recipe so if the path is forward slash
forward slash recipe
then render out this recipe
component okay well currently it's not
going to work because
this router file only exists in our
components folder and we actually need
to make use of it so to make use of it
let's just go back to our index.js file
and let's completely trash this app
component right there and instead let's
import
i believe it's router
from
and then i think it's in the components
folder and then router okay so now
instead of this app component we're
going to make use of this router
component right there
okay press save go back to the web
browser and it says export defaults
imported as router was not found and i
know what the mistake is
back in writing yes we need to make use
of this
switch statement right there so to do
that
let's just type switch
and then throw in
our routes
and i also forgot to
export this so export defaults and then
router
so now if i go back to
the web browser we can see that we have
our app component in all its glory and
we can still search for recipes so
if i type in chicken i can get the
results that involve chicken and then
right there what comp what other path
did we create we created this recipe
path so if i type in
forward slash recipe
i don't get recipe and this is because
react router can be a huge dick at times
so to fix that all we need to do is we
need to give in the keyword exact right
there to the topmost component
what this is going to do is it's going
to make sure that only render out this
app components
when this path is exactly this forward
slash and there's there is nothing else
in front of it
so now if you press save go back to the
web browser we can see that we are
indeed on this recipe path and we are
getting this
recipe component render out to our
application
okay so now let's actually
make the button work so what i mean is
you know this person right there
let's actually make this work so when we
press it we actually get taken to the
recipe
okay so to do that
it's going to be a bit more complicated
than what we're used to but let's give
it a go
so
back in this router.js file
we don't really want this
static recipe path what we want is we
want
a path parameter
or in other words it's also called a
route parameter so to start error
parameter you type in colon
and then anything that goes after it is
considered as a parameter or a variable
so
what do we need in this case well you
can name it anything but we're gonna
grab the recipe id
to access the data of the recipe so
for the sake of simplicity and relevance
let's just type in id
okay now
this path will only work
so if i just simply go to recipe it's
not going to work so forward slash
recipe
you can see that it's not going to work
and this is because it also it's also
going to take a route parameter
so if i type anything after that let's
say if i type in one
then we can see that the recipe
component is indeed showing up okay so
this is how it's going to work
so what's next
well
you know this button
this view recipe button this lives
inside of this recipes.js file which is
this thing right there
so to make to make this work we're going
to grab another named export from the
react write down packets and let's just
type it in first
come on
and
this package is called well this is a
named export indeed and this is called
link
now this link essentially works the same
as the anchor tag in html all it does is
it directs you to whatever link it is
you know pointing at
so to do that let's just first go ahead
and split this button into multiple
lines
and what i'm going to do is i'm going to
cook this this new recipe text
and there i'm just going to go ahead and
throw in this view recipe and convert
this to a link
it's not going to do anything just yet
but let's just go ahead and press save
go back to the web browser
search for the recipes
and our application breaks this is
because
we need to specify a two attribute
to this this link
right there so essentially it's the same
as saying so you know two is basically
telling it what path does it need to go
to so in our application we have two
paths
so what we're doing here is we need we
need to tell this link to which of these
two paths to go to once it's been
clicked
so now obviously we need to go to this
recipe forward slash id and now remember
this is a parameter so anything that
goes in there gets gets replaced by this
id parameter okay
so we're actually going to make use of
template strings right there because we
need to inject some variables
so to do that how do we do that because
the template strings don't really seem
to be working well to fix this all we
need to do is we need to open up a
javascript expression and then inside of
it we need to open up a object
and then we type in path name
now this is where we're going to assign
the path so
if the path is and and let's set it to
tempo literals because remember inside
of a javascript express
inside of a javascript expression we can
use the template rituals
so
if the path is forward slash recipe
now
again this is id so that means we need
to grab the id of the recipe
so remember we are in fact mapping over
the the whole recipes array right there
so to grab the recipes all we need to do
is forward slash recipes and then
remember we can inject the variables so
to throw in the recipe id we can just
say that recipe so remember this recipe
is referring to
this recipe argument right there so
recipe dot and then the properties that
we need is called come on it's not there
recipe
underscore id
okay and now
how do we actually proceed with that i
mean yes we do have this path provided
so if i go back to the web browser
press search
and you can see that this has indeed
been
convert it to a link so now if i hover
over it i get this you know hand sign
and then it's showing me that it's
actually a link so let's see what
happens when we press this button the
recipe
boom
we do indeed get taken so remember this
is the recipe
this is the recipe id
and once we hit it we get taken to this
recipe route right there
so now if we choose a different recipe
let's say we click on that
we can see that the recipe id has been
changed because the recipe id is just a
number and that is what we're using to
throw into our url
does that make sense well i hope it does
okay so what's next
well how do we actually access the data
inside of this recipe.js file
first of all we need to convert this to
a class-based component because we're
going to use some of the properties that
are only available inside of the class
based component so to do that class
recipe
extends
react
dot component
excellent let's just open up a pair of
curly braces type in render and return
some jsx so for now let's just return
again the recipe component
okay press search go back to the web
browser make sure everything is working
fine yes it is
okay so
if we didn't know any better we wouldn't
know that what's going on inside of this
recipe component but we do indeed have
access to props right so if i type in
console.log
and then just props so we all we're
doing here is we're just console logging
the props
so as soon as this component is loaded
it says props is not defined and this is
because we need to lock this dot props
okay
go back to the web browser
open up the console so
there we go and we do indeed have an
object so if i expand it
this is just
a lot of
react writer stuff that's been bound to
this recipe component because
we specified it right there in this
recipes.js file
so the reason we are getting all this
react writer stuff is because we created
a link right there
and then this link belongs to react
router so that means it's been bound to
this recipe component as well
okay so now if we go ahead and take a
look at it
we can see that we have a location
object and if i expand it
this is the path name that we set right
there in recipes.js file
this thing right there
okay
and we also have another property called
state
and this is what we're going to use in
order to display the actual recipe onto
this recipe component
so to do that
what are we gonna do
well back in this recipes.js file we are
gonna create an other attribute inside
of this object right there
so right after this string ends
actually let me just break it down to a
new line
so path name and then i believe it's
that one right there
and this one is going to be called state
okay
now this state is going to
contain a another object and the name of
the object is gonna be recipe
okay and let's just call it now like i
said we're gonna use the recipe title in
order to display the data so
to see to do that let's just say recipe
dots and then title
and we do have access to this recipe
because we are mapping over a recipe
array and then we are setting up this
recipe argument right there
press save go back to the web browser
and again expand this object
and if i refresh it
we can see that the state is still
undefined
and this is because the state is only
going to get calls when we press this
button now in this case this page is
merely getting refreshed it's not
we are not coming here because the
button has been pressed so the state is
only going to get set once we actually
press the button
so now if i go back all the way to my
app component
and again we type in chicken press
search just go to any recipe let's just
try that one
and now if i open up my console
we can see we have an object
and there we
do have a state object and inside of it
we have the title which is called well
whatever it was called chicken
pyramidian i don't know what it is but
anyway the good news is that we can use
this state to display the data onto this
recipe application
okay so let's just do that now
so back in this recipe.js file there is
a reason why i set this up as a
class-based component
and the reason is that we're going to
make use of state inside of this
component okay
so first of all let's just go ahead and
declare our state
and
the state is going to be called active
recipe
and for now let's just set it to an
empty array
okay well next uh what's next
well we're gonna make use of a react
built-in method or in other words called
a life cycle hook
called
component did mount
this method is going to get fired as
soon as this component
gets loaded or gets mounted onto the web
browser
so anything that happens inside of it
it's going to happen as soon as this
component loads on the screen okay
and we're actually going to do something
pretty similar to what we did in app.js
so for the most part what i'm going to
do is i'm just going to go ahead and
copy everything that's inside of this
skip recipe method
and we're just gonna change a few things
for now let's just paste them and we
also need our api key
okay copy this go back to the recipe
component and paste it right there
so what exactly are we going to change
well
there is no recipe name
in this component because obviously
there is no form so
what i'm going to do is i'm going to go
ahead and delete this and i'm gonna
instead type in title because the title
is what we're gonna grab
in order to display the data so title is
what what do we equal it to
we have an object there right so
this dot props and then it's location so
this dot prop shot location and then
location.state and then the property is
called recipe
and remember we are getting this because
back in recipes.js file we set up the
state and then state the recipe
okay so
this
the location
actually is this dot crops
location
and then it's state
and then it's recipe excellent
so now what we need to do is we need to
replace
this recipe name with this title right
there because this recipe name constant
does not exist anymore and we can also
get rid of this count
okay so we can get rid of that and i'm
just going to copy this and i'm going to
paste it right there
and we don't need this e dot prevent
default because there is no form right
there so we can just go ahead and get
rid of that as well
right so
next up let's just change uh the names
of these two constants because they
already exist inside of this app.js file
and it's not going to make a difference
but it's best not to have any duplicates
so i'm going to change this to
rec or request and i'm going to change
that to res or results or response
whatever you want to call it
and let's just get rid of these two
statements right there and for now let's
just console log
this res right there
all right so press save
go back to the web browser
and it says that api call is not defined
and line number 13. so let's take a look
at what's going wrong all right of
course we need to
change this to rec
okay press save go back to the web
browser
and we are on the recipe component and
there we go we do have a count showing
up but it's actually 18 recipes it's
giving us
and the reason for this is because the
recipe that we clicked on
maybe has more than one name so you know
it's cashew and chicken pasta you can
see there's quite a few of these so to
fix that
the the most relevant recipe is going to
be
the topmost recipe in the array in this
case the index is zero so instead of
grabbing everything that's inside of
this um recipes array what we can do is
we can say red so remember res is this
whole object so rest.recipes
and then we just need to grab the first
element in the array so in this case
we're going to grab the
element with the index of zero okay
press save go back to the web browser
and now we can see that we're only
getting the
recipe with this id that we searched for
which is four six double line six and
this is the title and these are all the
images and you know the publisher that
we're going to use to display the data
okay brilliant so what's next
so now we're going to make use of this
active recipe state right there to
actually display the data onto our
actual screen okay so to do that let's
just type let's just get rid of this
console log right there for now
and
instead just type in this
dot
set state
and then it's going to take an object
and then we're going to assign the
active recipe state the exact same thing
that we will that we were console
logging earlier so that was res that
recipe
and then the first
index inside of it okay
press save and now instead of console
logging the res object let's just
console log the actual state so this dot
state dot
active recipe
press save
go back to the web browser and we should
still get back the same thing but beyond
so let's take a look why
so it says
oh actually it should be recipes
okay now this should work let's go back
to the web browser
and
yes we are indeed getting back the same
thing
okay so
now how do we use this piece of state to
actually display the data onto our
actual you know
this whole screen right there
well
let's just add a bit obstructed inside
of this render method so i'm actually
gonna get rid of this whole thing and
you're just gonna have to watch me type
a bunch of
you know markup using the using the
classes and some of the bootstrap
classes so
the first one we're gonna start off with
is called container
and this is going to act as the wrapper
div
and then inside of container what we're
going to do is i think the next class
that comes is a
because we
we don't need to add a row because in
this case we aren't really
throwing in any columns all we need is
just a big image and then underneath
that just the title and the publisher
and that's it so we don't really need to
add any rows or anything so what i'm
going to do is i'm just going to throw
in a custom class that i've written and
this is called active
dash recipe
okay let's crack open this and inside of
it we're going to grab the image so
remember we do have access to all these
properties just like we did in app.js
file
so in this image tag i'm going to give
it a class of
i believe is active
recipe underscore underscore image and
then the source is going to be
now see if we type in this dot state dot
active recipe and then you know grab all
these values
this is going to get a bit messy
i mean we're gonna have to do this for
the title we're gonna have to do this
for um
for the publisher for the website
so an easy way to fix this is to
actually store that into a constant so
just above this return statement what we
can do is we can create a new constant
and we can call it recipe and then we
can set it to this dot state dot active
recipe
okay so now instead of typing out this
whole thing we can just copy this
and we can paste it right there
and now that's all we need to type in
order to grab the values of the object
okay
so now recipe starts and then it's
image underscore url
and for the alt tag let's just give it
recipe
dot
title
excellent
press save
let's take a look at what's going on in
the web browser and
there we go we do have the image showing
up and this is brilliant so that means
everything is working fine so let's move
on
okay so right below this image tag i'm
gonna throw in a h3 title tag and i'm
gonna give it a class name of i think
it's i'm just gonna head go ahead and
copy this active recipe because
this is the prefix to every class name
and then
the prefix is
title
okay and the title is obviously going to
be recipe
dot title
okay moving on let's add a h4 in there
and i'm going to give this a class name
of i think it's rest active recipe and
then we're going to also grab this
publisher
because you know we're just going to
show that who actually created this
recipe so we're going to grab this
publisher property
so i'm just going to go ahead and copy
this whole thing
and paste it right there and i'm going
to replace this title with
i think is publisher
yep
okay and within there let's just throw
in
actually let's just break this into a
multiple line because we're also going
to throw in a span tag
so
let's type in publisher
and then open up a span tag and then
inside of it i'm just going to add a
i'm just going to grab the property so
recipe.publisher
okay brilliant so what's next
well uh just below this
uh h4 tag let's throw in a paragraph tag
and give it a class name
of
i'm just going to go ahead and copy this
active recipe underscore underscore
and this is going to be the website of
the publisher so in this case we're
going to grab
come on
where is the website so publisher
publisher url recipe id title i think
it's this one right there search url yep
that's it
oh publisher url actually this one right
there so this is the property that we're
gonna grab in order to let users know
that you know this is the website of
this
recipe creator
so again we're going to break this down
to a multiple a new line and i'm just
going to type in the word website right
there
add in a colon and then right there i'm
going to type in a span
and i'm going to give that
inside of it it's going to be an anchor
tag because obviously we need to redraw
it
we need to redirect our users to their
website
so the hrav is going to be so
what is it
recipe.publisher publisher url okay
recipe.publisher
and then underscore
url and within there let's just uh
type in the uh exact same thing so i'm
actually just going to go ahead and copy
this
and paste it right there because we're
actually going to display the website
onto the screen as well
right so the last thing that we need in
there is the actual button that we are
going to go ahead and create now so
button
and this is going to be responsible for
taking us back to the home page so let's
just give it a class name of
and i'm just gonna go ahead and copy
this active recipe thing paste it right
there
and then it's called button
okay and let's just type in go
home
brilliant
press save go back to the web browser
and we should have our desired desired
results yes we do
okay so
now you may notice that before the page
loads
this whole blank thing is showing up
right there
and we don't want that
so what do we do to change that
well let's just make a check
we can check that
if the uh because you know since all
these values are coming from the state
so we can just make a simple check that
if this state
has a length of zero then we don't want
to display anything
because if it's zero that means that
this array is empty this active recipe
state is empty which means that nothing
is inside of it so as soon as it it gets
filled we can actually display our data
okay so to do that i'm actually going to
cut out everything that's inside of this
active recipe div
and open up a javascript expression
and inside of it i'm just going to type
so we're going to make use of the and
operator so as you know for the and
operator
both of the conditions have to be true
in order for something to execute okay
so we can say that this
dot state
dot active recipe
and then since it's an array we can grab
the length property and we can check
that if this is not equal to zero
so again
if anything is inside of this array
the length is going to be greater than
zero so if this dot state dot active
recipes length is not equal to zero only
then do we want to render out everything
that that's inside of this div that we
just cut out so
there we go we are making use of the and
operator and now we can just go ahead
and paste our div right there
excellent
so i'm just going to indent some of this
stuff in just like that
actually this should be there and then
this should be there okay now if we go
back to the web browser we can see that
nothing shows up until the page actually
loads and then the state gets filled
so
we need to actually make this go
homework button work as well so how do
we do that because you know we can't
really make use of the actual a tag
because that's gonna result into a full
page refresh
so if you are guessing that we're gonna
make use of react router then you are
absolutely right so
first of all we need to grab a named
export from react router
okay and
that is going to be
link
and remember we did we did use this link
right there in recipes as well and that
is exactly what we're going to do inside
of this recipe components as well
okay so i'm just going to go ahead and
break this button down into multiple
lines
cut this out and
open up a link tag and paste it right
there now the only thing that we need to
provide here is the path name so
remember we have two parts we have the
home path and then we have the recipe
path so currently in this inside of the
society component we are indeed on the
recipe path so
right there all we need to do is we need
to say that once this button has been
clicked take us back to home page so for
the home page the path is forward slash
okay so now if we go back to the web
browser
and we can see that this has been
converted to a link and if i press this
we get taken to the home page and from
there on we can search for another
recipe so
actually let's type something different
because we have used chicken quite a bit
okay shrimp and then let's just go to
one of these
the recipe and then yeah it's working
just fine
from there on we can go back to our
homepage using this go home button
okay so our application is pretty much
done for the most part the only thing
that's left now is
you know when we go back to the home
page our results are gone
so
we want uh
you know we
we want to keep our results
you know when we go back to the homepage
we don't really want to search through
the you know the index again
and grab everything we want to we want
we want our results to be there just the
way they were before we navigated away
from this page
so let's take care of that
inside of our app.js file okay so i'm
just going to close everything else
because i don't think we need anything
else anymore
now inside of this app.js file
we're gonna make use of a couple new
react lifecycle hooks
and those two are component did update
and component did mount actually we've
used component demand already so the
only new one is componented update
so
component did update works something
like
this we don't really need these two
arguments because these are for
something a little more advanced but
essentially the way this works is
whatever happens inside of this method
is going to happen as soon as the
component has updated
and when does the component usually
update well when the state changes okay
so as soon as the state updates the
component is going to update as well so
as soon as that happens what we're going
to do is we're going to create a
constant all right and we're going to
call it recipes
and then we're just going to make use of
the local storage to store our data so
what we're going to do is
first of all we're gonna
convert this into you know our
our recipe state into the json format
because local storage only takes strings
it doesn't take any objects it doesn't
take any arrays it doesn't take any
numbers nothing it just takes string uh
it just takes the string so as uh json
basically is just a one big string
so to convert this we're gonna say json
dot stringify
and then what what do we need to
stringify well we need to stringify this
recipe state so json.stringify
and then this dot state
dot recipes
okay so once that's been done we need to
actually assign it to local storage so
to do that we can just say local storage
and then you set an item in local
storage you use the property called set
item
and it takes a couple of arguments
the first one is the name of the item
which is going to store this recipe
array right there so we need to provide
that into in a string so i'm just going
to call it recipes
and the second argument is the actual
thing that you want to store and in this
case we want to store our recipes
our recipe state so this is what we're
going to type in right there okay
so now if we go back to our web browser
open up the state
and let's just search for chicken
because right now it hasn't been updated
but it's going to get updated as soon as
you press search because that's when the
state updates
so
now from there let's just look for local
storage because i kind of forgot where
it lives so performance application
local storage
and there we go we can see that
everything that we looked for is inside
of this
recipes object so right there if we type
in
local storage
dot get item and then what did we set
the item to is recipes right
so get item is an other method on local
storage which we can use to grab the
items that we set so in this case we set
the recipes item right there so we can
say localstorage.get item and then if
you press it press enter we can see that
we are getting everything in form of a
string so you can see this is a
quotation mark and it ends right there
at the end and this is why it's a very
ugly format because this is not json
this is just a one big string
all right so what's next well
once we have actually set this to local
storage
now using another lifecycle hook called
component did mount
we're just going to oh that's not it
now in this method we're just going to
fetch everything that's inside of our
local storage so to do that
we first need to grab our
stored item which in this case is recipe
so i'm just going to create a new
constant and i'm gonna call it json
okay and i'm gonna set it to local
storage dot and then in order to get an
item we use the get item property and
then we're gonna grab the recipes item
that we just set
okay so now we first need to convert it
to the actual json format because
currently it's in the string format
because we can't display any strings or
any of the type onto the web browser so
it has to be in json okay so we can say
we can create a new constant called
recipes
and then we can say json and then to
pass a string we say json.parse
and then we can type we can pass in this
json constraint right there okay
excellent so now all we need to do is we
just need to set this recipes to this
recipe state right there okay so this
dot set state
and then
an object and then recipes
and then this constant right there
okay
and now one neat bit of syntax in es6 is
that if the name of the of the
property and the key
if
these two names are the same then you
can just make it something like this
okay if it was something like recipe
then we would actually have to type it
this way but in es6 if the names of the
keys and the values are the same then
you can just do something like this okay
now if you press save go back to the web
browser
we can see that we are indeed going
through a full page refresh but nothing
is changing we can see that we are still
getting the results and
let's just look for something else let's
look for garlic press set
and let's just do let's just view one of
these recipes let's just view this one
and we are indeed getting it back now if
you go back to the home page we can see
that we still have the recipe that we
searched for
okay well this is it for this video and
i really hope you learned something from
it thank you very much for watching and
i will see you next time goodbye