Did I tell you that in react the hair is gonna be multiple ways how we can write stuff.
I think I did.
So why don't we take a look at what would be alternative syntax that you're going to see for the state
and again there's probably a 10000 question which is gonna be better.
Again this is gonna depend on the situation.
So why don't we create that first and then we're gonna talk about it.
However before we do that why don't we utilize the fact that we can do the imports and exports with
our application where the six modules.
And why don't we transfer all these book data to a separate file.
And this is something that we're going to be doing later on especially as your data grows bigger and
bigger.
This will gonna start getting annoying where we have the state and state has all this information and
then you are entering somewhere here in the bottom so it might be much much more simpler if this data
would be in a separate file and then we're just grabbing the data.
So how this is going to work.
Well let's say first and foremost Hey we're gonna swing back and then somewhere here we're going to
create a new file and we're going to say new file and book data.
You can call like this.
This is going to be jazz.
Then this is gonna be my array and still say hey box that is gonna be my array.
And then within this array I would like all this information.
Now I don't care about the book right now actually I think I can close it.
I don't think it's gonna break anything as we're walking along and now let me get all this info.
I'm gonna head over back to the box.
We're going to copy and paste it maybe in order to make this interesting for so let me close the sidebar
as well as Let's copy and paste it just so we have more of them.
So one two three and you know what.
One thing that I always forget to do as I'm setting up these ideas.
I usually don't change them.
So now let's make a difference and actually I we're gonna be adding proper ones.
I will not going to be changing the names again.
This is just to show you how everything works and doesn't really matter how many we have.
But then here at the bottom I'm gonna say export I export.
Now we have the name of a slave box so we can just do the default one or whatever we would like.
We can do the obviously name one as well so let's write books.
This is gonna be saved right now.
And now as we head over back the book list we can do the import and do import.
And then we're gonna be looking for books data again since this is a default I can name this whatever
I like and we're gonna be looking for the book data.
So from that we have forward slash and we're gonna be looking for the book data.
And in this case what I would like to do is set up these books in the state not equal to already in
array but I'm just going to use those books there and let's see how this is gonna work.
So I would say books there.
And the moment we say it you already notice that I have more of them.
So you can clearly see that this is going to be working.
And that's one of the neat things how we can separate the concern.
So there is gonna be in one spot and again this would be very small data.
In general we're going to be having much more and then we're just using the state to work with this
data.
However since we have the class this is a class based component and with the classes we have a constructor
method.
Now the constructor method is gonna be instantiated every time we're going to create a class every time
we're going to render the class and that way what we can do is we can actually extended again or use
it with props.
Now how this is gonna work so we're gonna say that there is gonna be a constructor so there's gonna
be again our method and then here we would need to pass the props.
So would say prompts like this.
And then within the constructor we need to use again super.
And that's again it has to do something with the fact that we need to inherit that from the actual component
class.
Now what this is gonna allow us to do is set the stage here so I can say this that state.
So in this case again the difference would be that we need to use this that and then we're looking for
the state now in our case.
Again we're gonna do the same thing.
We're all gonna be having here the object and then we're going to pass it here.
So I'm gonna grab this value we're just gonna cut it out and we're gonna copy and paste it.
There is also one more thing that hasn't been working with events there's gonna be two ways of binding
this and one way of binding your events is going to be in a construct.
So I'm gonna leave this and you know what I can just tell you that again to answer your question well
when you should use the constructor and when you should use super because both of them are being supported.
Well the question is that if you're gonna be using the constructor this will gonna allow you to access
the prompts as you're working directly in a state.
Meaning the power props that are being passed down to a your class based component.
And this is sometimes very useful where you can right away work with your state and the props that you're
getting there's gonna be cases where we're gonna use lifecycle methods for that.
So throughout the course whenever we're gonna utilize this we were going to rewrite this kind of syntax
where the search state is gonna be set up in our constructor and we're just gonna be again following
the syntax where we have the props and the super.
And by the way in the year 6 the syntax is exactly the same whenever we are extending a class from somebody
or let's say inheriting then we do need to use this soup.
And the difference would be obviously in this case we're using this that's at stake.
And normally we're just gonna use state one again.
There's gonna be some benefits to this and there's gonna be some cases where we we're going to utilize
this but if you don't use those cases obviously you can use either or you can work with the state as
well as you can work with the construct.
And last but not least.
Again as we're covering the events this is the situation where again we're gonna have two types of bindings
where we can just bind it with an arrow function or we're going to have to do it again in the construct.
So that would be a short answer about the alternative syntax that we can have for the state.
Everything else is gonna work exactly the same.
I'm just gonna be no different.