That was nice and easy.
Now we know how we can work with class based components how we can work with state.
The alternative syntax to the state.
Why don't we make our application a little bit better looking.
Because at the moment I would have to be honest with you.
It kind of looks ugly and obviously this is on me since I'm guiding us and I don't like the way this
is going work.
So why don't we try to again recreate like we had already with Amazon looks when there is gonna be some
kind of book.
How is that going to be a book title as well as the author.
You can choose whatever books you would like.
Again I'm gonna pick the ones that I like the most I guess.
Judging by the images and then is gonna look how everything is gonna work together being displayed as
a nice application.
So first and foremost I'm gonna head over back to the book data.
This is what I'm interested and I'm just going to delete at the moment everything because we're gonna
set up everything from scratch.
The neat thing here is that the way we have set up everything that this is being passed to a state then
state as this as books and then we're doing the mapping.
The only thing we're going to have to change is the book data as well as the book component itself not
as this guy.
The one that we were working in the beginning.
This is the one they're all going to have to change.
In fact book list we're going to be able to just leave it the way it is.
Now we're gonna get rid of some things I think especially in an app like Me head over back there first
probably and I'm just gonna get over this.
This is my application.
It's kind of obvious that this is gonna be our application as well as right away.
You know what.
Why don't we import the CSX because we're gonna use a little bit of apps to assess and just to refresh
our memory we have to do it this way when we have the app.
Then we have the full file extension and then the moment we're gonna save it.
Now we're using the apps yes in our file.
Okay that was easy.
Now I can close the sidebar since I am importing apps he says I don't need the app just anymore as well
as I don't need the index.
I will gonna use the book data and you know what my book disappeared.
So let me head over back to the book.
Again I'm going to close the sidebar and why don't we change it around a little bit here.
I'm going to say first of all that there is gonna be.
So fair enough.
We're going to work with some kind of.
Then we're gonna have the image and the way we're going to get the image.
Again we're not going to download the image or we're gonna get the path now the way you can do that.
We can just say copy and generous and we're gonna set this up in a string.
The model will copy and paste it everything should be working fine.
Then we are also gonna have the title every book should have the title.
So this guy's gonna be again our donkey.
Then this is gonna be a string again.
Now last but not least we do have our author again we will gonna do a little bit of copying pasting
in the beginning because I do find it even though it's a little bit redundant I find it a little bit
faster then again just re typing everything.
And our idea is again to kind of see how everything works together not spend too much time on setting
this up and then I'm going to say that there's gonna be three of them.
So one two three.
And let's just change these values so this would be two.
Then we're gonna have three and then let's pick some kind of different books.
So let's say we're gonna be first of all looking for I don't know what I am kind of looking for the
short titles and everything.
And once I'm being put on the spot I cannot find something.
So let's say here again copy a major address.
Then I'm going to replace this guy as well as the title is gonna be right here.
Okay what else we have all we have the name which is gonna be like this.
So we are going to copy and paste this and then let's do one more.
I don't think we need to do two crazy because we might as well just copy and paste it and we'll see
how everything looks nice and our former first lady.
Why don't we do this one.
What a long long long common human dress.
And I'm gonna write say like this campaign paste it then becoming.
That was the name on here.
Course I'm going here where I didn't want.
But you know what.
I was just gonna live with that.
I was gonna have the name here this is going to be might be coming and then we can do by Michelle Obama
and this is going to be hard to copy probably.
Let me head over back here and let's say like this.
So this would be the extent of copying pasting again.
I understand.
Might be a little bit redundant but still faster than typing everything this by hand.
And what I'm noticing right now that I'm only getting the author.
So even though everything worked in the book I am only requesting this book as well as the author.
So we would need to change this around.
But obviously these are not the values that we're getting right now.
So what do we have instead is what.
Well we're going to have first of all the image.
So we're going to be getting the images then we have the title and then we have the author.
And now I'd like to restructure all but where within the article we're going to have the image but for
image this is we're all gonna be getting the source.
Now the source is going to be our image.
So I'm going to write over here like this.
This wouldn't be my image.
It's a book.
And that would be her image and weave right away.
Can I then on a with of like I don't know one hundred and fifty obviously there's gonna be small enough
as well as we have heading for heading for is gonna be our title well it's right here like this.
Tiny toll now.
So we're going to change this guy and this is actually going to be our title.
And last but not least we have the hanging six for our author and and for the author.
We just want to work with a capital case and then let's see what we're going to have whether everything
is going to work out or not.
And it does and it looks really good.
And again the key here is like this since we're working already state and we set up everything where
we are looping through the state we're getting our item.
This is gonna be each and every list item and then passing here is and therefore we're only interested
here as working with this author.
That's all we need.
I'm sorry the book.
The book component is the one that we're interested.
And also I would like to work with whatever values I have in my success.
So why don't we add the class name and let's say the class name is going to be book and my idea would
be like this I would like to put the text side by side with the book and then the books are going to
be rendered.
So here I'm going to write the following.
And you know what.
One thing I would like to add is just some space in between.
I think this is gonna look a little bit better.
Then we can head over back to the lab see assess how this was gonna be our apps is this.
We can either delete everything that's also an option we can say like this and then let just target
the book Class now for The Book class we're going to say that this will gonna be a display of grid then
we would like to send them side by side so I can say grid template columns and then the first value
is gonna be how wide is the first count.
And I would like to set this up for the image to be order.
So regardless of how big is naming then I also would like to work with the second one which is going
to be one fraction not one fraction is just gonna be for a text and this is going to take up the rest
of the space.
And here let's add maybe grid gap or grid column.
Let's do that get a column back is gonna be one our rhythms as well as last but not least let's add
margin and we're gonna write over here I don't know to our rhythms and zero something like this.
Now the moment we served notice right now we're having our title then we are also have the author.
However the kicker here is the simple fact that as we're setting up this book we should place this one
in a separate div and then everything is gonna be working at the moment.
This is not going to work the way I would want.
So I'm going to reset this as a title and the only issue I guess right now is the donkey is screwing
up everything.
So obviously the reason for that is probably because they're getting a different image like this is
bigger I guess.
So why don't I go with this guy or not guy.
I'm sorry girl.
And that way they're all going to be the same.
So if you really like the donkey my apologies but we're gonna get rid of it and we're gonna head over
back to book data.
And where are you donkey.
Think you are like this.
So I'm going to copy and paste it then we're gonna get whatever the name is.
And you know what I know.
Yeah I know I can get the full name like this and just copy on this one and we're gonna have a full
name something similar.
And then we're gonna head over again back to get the author.
This was a little bit of detour I wasn't expecting that a donkey is gonna let me down.
So hopefully we're gonna be able to get over that and now we save it and at least now they look side
by side.
So that's our neat thing how we can use the list and if we want to again copy and paste it once everything
is set up in a state we can whatever have values.
How many like so let's say 1 2.
Again I'm not gonna be changing the actual values I will gonna change the idea otherwise you will gonna
have big fat error or maybe another place to complain in your council.
This is gonna before it's going to be five and then this is gonna be six.
So we should be having six of them.
So that's really neat how we can work with react set up our list set up our functionality and then we
can just change whatever values we are getting from external API or that would be our own list.