Once we are aware of how we can work with class based components why don't we take a look at the major
players that are going to be happening once we use the class based component.
And that would be state as well as the this that sets and the reason would be very simple because for
now we have been using the props and perhaps are great props are awesome our props are read only.
And if you'd want to hold access or change the data of the component we will gonna have to use the state
as well as this that said state which we're going to cover in more detail as we work with events.
However I do want to tell you right away that there is a reasoning why we're calling the state and the
reason is the fact that we can access it later on.
OK.
Now I also need to warn you right away that this video can get quite long because I do want to kind
of show you all the pitfalls the children have along the way.
If you're not using this and first and foremost I would want to delete a little bit of what we have
so far because there's quite a bit of junk that we really don't need.
So let's say first we're going to begin getting rid of all these imports here as well as we're just
going to say you know what.
We don't want the banner We don't want the section.
We're just gonna say here that this is going to be heading one.
And we're just going to call this.
This is our application.
So that's going to be my app.
And by the way again I can pick and choose whatever I would like whether I want a functional component
as well as the class one.
So why don't we delete the class one for now.
Let's change the export.
So this is gonna be one.
So now this is going to be working.
We might as well can leave the import.
Doesn't really matter it's not going to affect us.
And then you know what.
We will go and head over to a component.
I'm going to delete the whole folder.
I'm not going to use the folder as well as we're gonna get rid of the data.
And what I would be looking for is not the package Jason.
That's not what I wanted.
I can also close the index and then let me delete the data which I wanted to do in the first place and
then we're gonna set up two components.
One is gonna be book list and the other one is gonna be book.
So let's say within the source there is going to be new file.
I'm going to call this book list.
We can capitalize it.
We can write it.
We had this.
There's no on the matter and we say book was that genius.
So for now let's just leave this empty and let's create another file that we're gonna call book.
So this is gonna be my second component with a book.
So these are gonna be three files we're gonna be doing most of our work so I might as well can close
the sidebar just so we can see everything better.
And then we know that we can use the snippets.
Now this guy at the book list is gonna be the class based component because this is we're all gonna
be practicing with our state so how we can get the easy syntax for their class component important we
just type RCC.
Now if we would want a function based component this is gonna be our reps.
So this isn't gonna do the RCC C and then we have right away our class based component.
Awesome.
Everything is working really well.
So why don't we have again some kind of section.
So let's write here section then we also we're gonna be selecting the second section there's gonna be
a second section and within the section again we're going to start very simply by some kind of having
three and we're gonna say this is our book we're gonna call this list so we can say something like this.
So this is gonna be our book.
Well I also want to write a way.
Import the book the functional component that we're going to be creating here and again in this case
we're gonna be using half C and then this is now going to be Dave.
Let's just change it let's say I'm going to select them both and I'm going to say that this is gonna
be some kind of article and within the article there is gonna be two hitting threes for now they're
not going to mean anything we're not gonna be using with any kind of dynamic data but we're gonna say
book and we can just put a colon and then we're gonna copy paste it and we're gonna have some kind of
author.
Well why don't we do the author would like adding five something a little bit smaller so something like
this let me say it and now like I said I would want to export it which by the way is already happening
here the moment we set it up with a snippet we are doing already.
Default export unless you hate the syntax then again you can write that this would be simple function
and then you just write the export default somewhere here no item no in my case I'm fine with the syntax
I know that this would be an export default and I know that this would be exactly in the same folder.
Plus the export is default so I can names whatever I'd like.
So in the book list I'm going to say from that I'm gonna be looking for the file and the file is gonna
be book and this is gonna be exactly here right next to it.
So we can save it.
That would be my book list.
And then right underneath the hearing three we're all gonna be rendering our book for now.
This is exactly what we're going to have.
We can do the self closing tag right away.
There is no difference.
And then obviously nothing is changing.
And the reason nothing is changing because we need to head over back to the map up James and we need
to import this as well so I can just leave the comments maybe on top.
But maybe right after react let's do import.
And now we're looking for a book list which obviously again is going to be default export anyway so
it doesn't really matter how we call it.
But just for the sake of clarity why don't we use the book list and then let's say that here this is
gonna be heading one and right after the hearing one we all gonna be working with the book.
And that's it.
We need to do for now in our wrap and I don't think we're going to actually do any kind of any more
work so I can just close the app and now I'm going to be focusing between these two where we have the
book list.
So this would be the component that's gonna hold a list of items and then we're gonna be rendering them
depending on some kind of ideas that we would have as well as there is gonna be a book that's gonna
render each and every single item.
And this is by the way something that you're going to see quite a lot where as you're gonna be working
you're gonna be setting this up where there's gonna be some kind of a list and then most likely you'll
gonna be setting up some kind of simple component or maybe not simple component but some kind of single
component doesn't gonna reflect that single item analyst.
Again this is just a side note but this is not the first and the last time you're gonna see this where
there's gonna be a list and then we're gonna work with that each and every item of the list with a separate
component.
This is quite typical common syntax that we're using.
Okay.
So where we're going from here.
So I have the book.
Awesome.
Everything is working well but what.
Let's say that there's going to be multiple books I just don't want one book.
I want multiple.
Well we already know okay so there's a class and maybe in a class I can create an array.
All right.
After all this is a class so I can say books and let's say that this is gonna be my right.
And within the books let's do since this is the proper way there is gonna be bunch of objects.
And when I say bunch of objects where knowledge is due to and then later on we can might add some let's
say book and this would be book book number and let's say 1 as was let's add the author author.
And here all going to be saying author is going to be I don't know John Doe now what I would like right
now since this is my array I would like to copy and paste it and I'll head over back here and I'm gonna
add maybe a comma since that will be the proper syntax and let's just change it around here.
Let's say this is not going to be book number one in fact this would be book number two.
And the author is gonna be I don't know Bobby Doyle.
Okay.
So far so good.
Everything is working fine.
We already know that we can pass the props we already aware.
So why don't we do that.
Why don't we say that we're going to be passing the props and within the props we're going to be looking
for some type of information that we're looking for from the books.
So how this is gonna work.
Well let's say we're gonna name our prop book then this is gonna be equal to the array that we have
color in this case.
We do need to use something we do need to use something else in the syntax because now we're in a class.
So now we're not just working with the simple array.
This is in fact class.
So we need to point back to this class and the way we're gonna do that we need to use the key word of
this then obviously the array is going to be books and then I'm going to be let's say looking for the
first item.
Now how can I access the item in the array.
The first one is gonna be zero.
So I can access the zero.
Okay.
Everything is working really well.
Now we can know already that we can head over back to our book and we can access the prompts the question
right now is and I purposely by the way made a class component because I wanted to show you how in a
class based component we can access the props because usually with function and you know what I'm looking
at I guess they created function.
So my apologies why don't we we do this again.
I do apologize.
I do want to show you how you can do it in the actual class.
I'm sorry I did previously with a function I thought I did the class but I was misunderstand and then
let's say that we're going to be working with the class.
So again same question how we can work with props in the class.
And you know what.
Let's do simple thing here.
And a section or not this was article right through an article and we can have the article right here
and then we're gonna do the same thing having three and let's say this book.
So in the colon for the book as well as we're going to copy paste it and we're gonna have the ending
five for our author so far so good.
Again we did a little bit of detour.
I hope you're going to forgive me.
And now the million dollar question how can we access the props in class because this is not a functional
component anymore for sure.
Now this is a class based upon and the way we do that.
Well first of all we can look at the destruction but maybe before we do that why don't we do it again
above the return.
So don't do it within the return that's just x.
Let's just write a simple log.
And again we need to use the keyword.
Now the keyword is this.
And then we're looking for props.
Again the naming here.
And now let's head over to the console.
Probably already guessed it what we're going to see it or hear we're going to go to the console and
then I see the object.
Now here I see that component is defined.
But this is never used.
So I was this is gonna be an app and not throughout the tutorial or throughout this video.
This might annoy me a little bit.
So why don't we get rid of this since this is gonna be the functional component anyway so I don't need
it.
Let me save it and now let me go again close the sidebar on this you can be looking for stuff so let's
do it this way.
And then we don't need that anymore.
And what do you see here.
What do you see here on the right hand side in the console.
And there's not props while we see the book and the book at this point is number one.
And then within the book we obviously have the other as well as the book.
So everything is working fine.
So the difference would be within the class we're using this does that props within the function we
just passed it down as an argument in this case however we're using this does not prompt.
So what we can do is since we know that there can be in the structuring and by the way let me just come
this out for future reference.
Maybe you'll want it.
And here I'm going to say like this we want to say that I'm going to be looking first of all for the
book because this is gonna be one of the key value pairs that I'm going to be looking also for the author.
And then from where.
Well we have these dot wraps and then we're going to be looking for the book and I'm going to save it.
And what I would like to do right now is use the power of J sex where I can insert the variables and
I'm going to say this is going to be my book and this is going to be my author.
So far so good.
Everything is working out really well.
I have the book book number one and an author who is going to be John Doe or something like.
OK.
Everything is really really awesome.
But there is quite a few issues as we're going to be working with this kind of setup and you know what
actually we can close the book as well because all our attention right now is gonna be to this guy to
the famous book list because this is we're all gonna be setting up to stay.
And what would be the issue.
Well OK.
So let's say we have two items here.
Right.
So I'm gonna copy and paste it.
I'm gonna say that in this case I'm not going to be accessing the book's value of zero meaning the zero
next thing that I'm gonna be accessing the one.
Okay.
So far so good.
So I have right now book number one then that would be John Doe then book number two is gonna be Bobby.
No.
Okay so far so good.
So let's say I'm gonna add here one to say one more and this is not what I wanted.
So let's say again we're gonna select them.
I'm going to copy and paste it in this case though we did copy paste it one more time then this would
be book number three as well as this would be I don't know Peter doe something like this.
Peter going to save it.
Well this is I was not showing so I wouldn't ask your question what we would do next.
Well you would say OK so we'll just gonna go on say book number by the index value.
And you would be correct in this case.
However imagine the scenario you're getting something from the API and you don't know how many of them.
If you have five you have five thousand you have three you have thirty three thousand.
It doesn't really matter.
But this is not sustainable.
I mean you're gonna go crazy if yours is gonna be really hand coding everything.
So there has to be a better way.
We have to be able to access the state regardless of where there is one item whether it's 10 items whether
it's fifty five items and we need to be able to render them all or maybe render I don't know the first
three on so on and so forth and this hand calling I'm sorry my friends it's really really gonna mess
you up.
So how I can do this.
Well I already kind of mentioned that we have a state right.
So why don't we change this all around the globe.
So within the class instead of having just these books I'm gonna create my state now for the state.
Again this is important.
This is a syntax and you need to follow the syntax.
So the state would be like this.
So when I write this state keyword then I'm going to set this equal to again I'm still working within
my class.
However this is gonna be my object.
So I'm sitting here that this would be a object and this is gonna be in a lot of sense the same as regular
javascript object meaning it gonna have the key value pairs and all that because obviously regular JavaScript
objects don't have this that's at stake.
But in general this syntax is gonna be like this where we have these curly braces and now we can place
everything within the state.
Okay.
So if we can place everything within a state why don't we grab the box why don't we say here like this
and we're going to copy and it.
However the key here is that obviously we are already operating an object and we know that for the key
value pairs we do need to have the code.
Because that would be the syntax for the apt.
So I can say it nicely this application right now is gonna break because that doesn't make sense.
And the reason why doesn't make sense first of all because we don't have the.
Some are calling and we shouldn't have the same icon.
So now we're gonna save it but we cannot access the values.
So even though I fixed my syntax error it says this that books and we don't have the books anymore we
have the state.
So we would need to fix it.
Okay.
So your question probably would be well why we just couldn't leave the array.
It was working fine so why we grab this kind of state and I guess the reason why we're using the state
is because we can control the state and we have special methods that can mutate the state that can change
the state and that not are gonna affect the performance.
So that's the reason why are we using the actual keyword.
That's the reason why we're not just using some regular monkey wrench array and then just you know we're
good.
No we do need to use the state because we would want to control it later on.
And again I'm just going to make a comment here because we're gonna be using something like this this
that state this is very very important because this is something that really gives an OK.
So where we're going from now no Okay I'm looking at the state and I can see that I have state and within
the state I have the key value pair with books and books as an array not k.
And I also know that I have the render method and above the return I can do whatever javascript I would
want.
So why don't we do this.
Why don't we get rid of this for now and later on we're going to fix it.
Don't worry.
But for now let's say that we're not going to be looking for this book.
And you know what.
Yeah why don't we take a look at the simple javascript method that we can have it on the right and the
way we access it first of all these books is again this dot because we are within the class.
So we need to point to the instance and then we're saying this that state and then we're looking for
this valley.
So first of all it's very simple.
Let's say concert and this is going to be my books.
And in this case I'm going to say this not because I'm accessing here.
This is actually not in props.
This is not something that we're passing down any props in this case.
We're just saying this that state and then we're looking for the books and this is gonna be for all
your properties that you have an estate.
Only thing you're gonna be doing is you're gonna be looking for is that state and then you're going
to be looking for whatever you have value in the actual state.
Okay.
And as I said we don't care about the books obviously this is gonna break.
Now the reason why this is gonna break because obviously we're looking for these vulnerable.
So why don't we common demand for now.
Because why don't we set them up first.
Everything within a state and then holds is going to deal with these values.
But what I would like to do right now is just to show you how are things working going to be looking
at the books.
So if I come and decide what do you see here here on the top in a console I can clearly see that I am
looking for my books so I can have access to the Internet.
So that's already a good sign.
Now okay so if I have all right.
All right has what.
It has method methods can be multiple methods.
We can.
I don't know split array we can mutate array or whatever but there is a really really nice.
Methods that are using higher functions so higher class functions where we can pass the function in
the method what methods I'm talking about.
Well we have a filter we have for each for each.
Then we also have map.
Then we also have redos.
And if you're not aware of them I can tell you right away within the react this is going to be your
bread and butter.
This is gonna be something that you're gonna be doing all now.
Yeah.
For each might be in a one off or whatever but filter and map.
Yeah.
If you're not aware of them you don't know how to use them.
I would suggest spending at least I don't know 5 10 minutes and looking at the syntax and the way they
work because this is something that you will gonna use a lot because you're gonna be iterating through
some lists and map is a very nifty.
Now what's common for all of them that we have the method and we're going to be passing some kind of
function or we can just write the anonymous function but then what they do is they apply this function
to each and every item in your list.
In our case this would be the book and filter is just gonna make sure that we are returning only certain
values.
Map allows us to change them around a little bit.
So in our case what we're gonna do is we all gonna return this item wrapped in a J sex.
That's the real power in the actual react.
And by the way again this is a lot of JavaScript only thing that's coming from react is the fact that
we're going to be wrapping this in the J sex but everything else is plain old simple child's script.
So why don't we take a stab at the map and I think this is just going to be the easiest one where we
can start working.
And I'm just gonna show you with an example.
So I have this that state box this is gonna be my array then I'm gonna be looking for my method and
I'm gonna say map method no math method is gonna look for one argument and that argument is gonna be
the function I can write this function outside of whatever this method of math or I can just pass it
here has a unanimous function which is really cool because as we working with the S6 the arrow functions
we can just have a very clean and short syntax.
Now what this is gonna do is I'm gonna say that this is gonna be my function so that's gonna be my hero
function.
And then again I'm doing the implicit return and then whatever I'm naming here this parameter is going
to look at the list and it's going to reflect each and every item in the list.
So I'm saying as you're looping through I wouldn't want to do something with this item.
Now this item can be an orange again this naming doesn't matter because this just talks about each and
every item in a.
And in this case I'm just naming this item.
But there is no rule that you need to name this item.
And since I know that I'm looping through the list and I'm going to be looking for the book why don't
we take a look at how we can create one book.
So let's say in this case I'm going to say OK.
So I'd like to loop through an array and then I'm going to say that I'm going to be looking for the
book.
Well I don't know why I'm typing name but let me write a book because I know that each and every object
here is gonna have this book.
So why don't we say this.
And again we would want to console log it which probably I don't know why I actually delete it.
So let me say this again.
And now what do I have in my right.
So instead of just a simple books array which would be all the items what I can do is I can start manipulating
these values so I can say you know what.
Yeah.
Loop through all my array what I have however returned from the array grab the item and only return
the book that is on this item and this up in the books and by the way one more thing that's happening
here.
Apart from for each is that they were going to create a new array for each is not going to create in
your age is going to loop through an array and do something whether that's console log the most simplest
solo or something like that but with the filter and mapping of use we are creating new arrays.
You can clearly see that we have the books all right.
And then we created the new right.
Now the key here is very very important and that is the fact that we can wrap this not just this book
number one.
Like I said we can wrap this in the J sex that is really really powerful.
Or we can just return this as a total item.
So let's say I'm just looking for the book.
So why do I want to combine this and just say that I want to return the item.
So how is that going to work well why don't we combine the both.
So I know that I have my math method.
I know I can look for a specific part in here.
Why don't I come in this out.
Again this is just gonna be for your reference.
And now let's start working with the books.
However for now I don't need the book.
What I need is to set up a javascript because I'm gonna be looking for the javascript functionality.
So here I'm going to say this that I'm looking for the state that I'm looking for the box is gonna be
my right and then I'm going to be looking again for the map.
Now in this case I will gonna have the item.
So that's going to be my first thing.
But also I can have the access to the index.
This is gonna be again specific to the math.
Again in this case I was going to show you this little little bit later on when we're going to use the
index.
And in fact I'm going to tell you right away that that is probably not something that you're going to
use very often because there are some downsides to it but just as a very simple way I do want to show
you this.
I'm going to say that I'm going to be looking for the item so each and every item in the array as well
as the index for design.
And that what I would want here as my result.
Well I want to say that for each and every item I'm gonna be returning the book.
So this is important.
So now I'm returning not only some whatever simple book number one and number number two what I am returning
is the actual component.
And then within the component I'm going to set the prop of let's say the name of rainfall and then within
this info I'm going to say that this is going to be the item.
So what I'm saying is I'm gonna loop through an array I'm going to start with Book Number One Number
Two Number Three.
And each and every iteration I'm going to create a component and then within this component we're going
to pass the info up and this info prob is gonna grab all the information that was already in it.
However once I might say that there's going to be a error in the console and even though everything
is going to be working fine I also need to change the book because remember when we were setting this
up we initially had this book and I was like This is not going to be in our props anymore.
What we need to do is change this to a more famous info.
So now what I'm saying.
And honestly I didn't say it here in the book list then I should be having what.
Well first of all I have this big massive morning.
And like I said we were gonna be dealing with this.
No worry about it.
And by the way I didn't.
I messed up here come into doubt for some reason but everything is rendered fine.
And what's really cool about this apart from this big fat error is the fact that now we can do something
like this.
You want more items.
Okay let's go ahead.
No I'm not going to be changing these values.
I see this as pointless thing.
But let's say I could have had more of what I use again.
So let's say karma karma karma.
So that will be the proper syntax.
What more do I have right now.
Well I have a bunch of books you delete them.
Sure.
Delete them.
So as you can see right now this is much much more powerful where I can control what is being rendered
by obviously having this component but then whatever values I'm gonna be getting back.
This is already dynamic and we are not doing any more of my friends the typical hard coding or anything
like that.
We are very smart because now we're making sure that no whatever books we're gonna have all of them
are going to be rendered unless obviously you set up some kind of I don't know cancellation or something
like that but unless you do that yes all of them are gonna be rendered and you don't need to jump back
and forth and change the values now you set it up.
If there's gonna be more books fine we're gonna be getting more books and there's gonna be less fine.
That also works for us.
So that is much much more powerful.
Trust me because hand coding like that.
That's not very smart that you let me come down from my emotional high and why don't we talk about it.
So why do we need to see what they're saying in the console is that each child in list should have a
unique and what's happening is that we act needs to keep track of what list is being rendered.
Because like I said later on we're going to work with the events we're gonna be changing something.
So what we need to do is to have a special again prop which is gonna be the key now for the key we need
to pass something unique which in our case we could technically pass index and everything is gonna be
working fine and nothing is gonna change.
Meaning there's gonna be nowhere in the console.
However there is an issue with an index that is the simple fact that yeah if there is gonna be a less
than nothing is gonna be changing.
You technically could leave the index and everything wouldn't be fine.
How has it all gonna be deleting some items from the list.
It might give you a hard time.
And the reason is very simple.
We're setting up the index.
So imagine if I delete this one.
What is gonna be the index right now.
Well this guy already doesn't have the next number one like it normally would.
Now this one has the zero so that's probably not the best way how you should do it.
And by the way if you're gonna be getting some kind of information from external API they most likely
are going to give you the ideas anyway.
But in this case the simple and quick and dirty way would be something like this where we just set up
the idea.
Now in this case what I can do is I can not look for the index.
Let me just delete this even though hopefully you understand that you can do that and instead of index
since we can access the item and say item and we're looking for the 80 is actually that is the key value
pair.
Now let me say it and again you see that there is no errors in console.
So everything is working out fine.
So for the key we need to use something unique which is going to be in most cases ideas which from the
external API you will gonna be getting most likely the I.D. or if you're creating your own list.
You can just make your own IP.
It doesn't really matter.
It's gonna do the same thing.
And then last but not least this is the important part where we using the map and state allows us to
really have a lot of control of how everything is gonna be rendered and later on we're going to see
how we can actually change these values so we can either remove something or add something and this
gives us much much more dynamic applications than just some kind of simple array and then we're just
hard coding everything of what is gonna be rendered.