OK, so next, we'll be creating the naughty list component.
Now, what did the Nautilus component not list component is responsible for rendering all of the both
the reviews or those reviews will be grabbed from the desk?
Or just basically the user will write the review, insert a note that I'm not really passing it to the
notorious and that would be getting inside the North Note list, so there would be a list of reviews.
So that is what the note list will do.
Other review list will do.
We can call it anything.
But as of now we are going with note on this or we will not try to confuse anyone.
So we'll just give the Nautilus to.
Inside of a that would be the noblest.
Not least on this and here, really important boilerplate code, so that would be odd IFC and then out
of this.
What we'll do is.
He'll create the basic structure first.
So inside this.
If.
What we'll do is we'll import in order to be an important import node from.
That is the component.
No, no, no, no.
I'm not.
No, 13-Year-Old, so you can, right, but that's not required.
Like React is smart enough to know that if we're not writing gorgeous, you, you actually mean the
same.
OK?
Don't worry about that.
We will also call the ad not.
Import or import and no from.
I know.
Yeah.
Next, what we'll do is we will import them inside this death and we will map the by before mapping
the data.
Let me just write the basic structure.
OK, we'll do that.
Like my defense is always do the white first like design the structure and then give the styling and
then give the functionality and then add the JavaScript.
Like my principles, I like that.
First, give the structure, then give styling by the thesis or whatever the icon you want to grab.
Anything like that, then you get functionality to it using JavaScript.
So that's like process, which I follow.
So we got the note component.
So not.
Of course not with capitals, OK?
On what we will sell closer to now, it will be expecting some crops like water with the promise of
Eternal that those crops.
So first of all, let me grab that inside this naughty list, so unintended intended naughty list will
be heading north.
We'll be having handlers not.
And we'll also be having the delete not.
OK.
These are the only three things, basically.
Nothing else.
So inside the note, what we'll do is we'll give the I.D. and it will do is there will be no doubt,
no doubt.
Yeah, sounds good.
And next, we'll be having the text backers.
And that would be no dark text.
Simple.
We'll be having the date.
They are not dead.
That will be no doubt that worse.
Yeah, and we will have the handle the the not so that will be also handled the lead note that will
be equal to that on the same.
And the not.
I think this is it.
Let me save it to get refactored after the note, we'll be having the worse because we wanted to split
the right inside the literally we are going to display it, not anywhere else.
So we'll throw in that also.
Will that add?
Node will sense it, and instead of here, it will be handle or not handle.
And.
And we say it.
We just saved it.
Oh, let me see if we can.
Give some styling to it, because right now it would not be looking so good.
So let us give a class, first of all.
And after giving, the class will give the styling in the index talks the US.
That's fine.
Let me give a class.
Last name.
Would be not list.
As simple as that, nothing complicated, the next we'll go to the next 48 hours to give.
OK, I made a typo, but no time, no instead of not.
OK, no problem.
My bad?
I save it list.
Now we will go to the next CIUSSS.
Inside the next 48 hours, we'll style the classes, which is then said the organizers basically only
one class, and that's the note list.
So nothing like different.
So inside the index, Stasio says, I believe it's totally not me.
OK, but let us give this statement.
So the class name, which we had inside did not list one in all that is the only class name we need
to customize, OK, so we'll copy that in order to avoid any typos.
We bastard and then we will give the class names or the class properties sorry.
So inside the notice, the very first thing which will do is will display the data in the grid form
like we don't want it to go in the roll wise, column wise, we want it to be in the form of cards and
in the form of groups.
So will do display grid.
Display grade and next will give the grade a gap like what should be the gap grade gap?
There'd be one, Nadiem, I guess.
We'll will also give the great template columns so great template column, you have to just typed the
words of all words.
After that you will get an audience edition.
That's the work of the escort, I guess.
And next, who will replace it?
Naturally, the media's repeated and that will be autofill.
Auto.
Well.
Com And that will be the minimum and maximum size.
So minimax, we will call it not, we will not call it, it's called Minimax Internal Affairs that will
be 250 pixels.
And one for.
We used that word for the excess, I guess, because only one glass is there.
And we have styled it, and that too is enough as inside the next hour to as if I see, like this month
is enough to make it look good.
And right now, we can't see it because I have not yet imported inside the yes, and I won't do it now
because I want to give some more functionality in Dallas.
So let us go inside the no thought not list.
And after coming here, we will do our really, really important step that is the notes we have to map
the reviews.
Before that we will use the map function.
So after this trip, we will give and this is, of course, because we are using JavaScript.
We will not will map the nodes or the reviews and all start map.
Inside there, the function, there will be no.
And this will be like this.
Yeah.
And will copy all of this not.
Not copy will cut.
I mean, you got it, and so there is and we'll save it, I guess there is no error, there should not
be any us.
Young after that will be having this are not so it is as simple as that.
So basically what we did is we just map the data on mapping means what a like that is, our database
or that is an array of object or there's an object, whatever, like there's a bunch of data mapping
that particular array or object will what it will do.
It will map through each and every element of the study.
Let's say, for example, the first one.
So that will be mapping the first one and that will be wherever you can.
If you want to display, you can display the first one, the second one and so on.
In the order one by one, it will display this one and then and then it will stop.
No, it will be keep on displaying.
It will be reading each and every single element inside the tree and it will be reporting it to like
returning it.
So that is the use of the map function.
OK, so now what we'll do is we will move to the abductees file and we will start rendering everything
and there in the after this.
So that should be in the next video.