Welcome to one of the beauty of this project.
So until now, we have discussed on how to handle created a component, the harder component and also
adding the elements to the idea.
So now in this video, we will see after adding the element of writing that to do this through Item
two, the idea how to in those values of the items in the interior as a note, as you can see here,
whenever we add something, you can see a note being, you know, appear to get an actual item.
So how to implement this by creating a note component so we can see that you virtually go to components
and create a note component.
Note that just once you're done with this, now, import the necessary things, import the act from
the Act.
Now, as you can see here.
Whenever we add up new to item, you can see a delayed symbol.
So where we got this delete symbol from discarded from material icons.
So those, as you saw in the previous videos, we ate that when we go to material, you write, you'll
be getting a search option and you can search for other items like the icons that you want by buried
the podium so that we can use the delete icon.
From great material.
You're right.
Icons.
Will it?
So once this is done.
Now I'll create a function for this, not.
This will take some probably to see what are those props?
And what we have to return, we have to return.
I don't.
With Glass, and I'm not.
This will have some not.
OK, so now are we allowed to use the.
Delete icon.
The new icon.
Visit Self-closing Taxol.
Know for losing that once you're done with this, you have to export it default.
Export pay for this will be the default export of this component.
Not.
If you have thought, like if you have different functions since you arrived in a single function,
we are exporting that as the default.
This company should export, but you're having three to four functions in this company.
Then you can give different export to one of the one of the function and then the remaining.
You're going to export them with their names so that whenever you import, you can import them using
that name that you export.
But when it is not before then you have to use the librettist when it's different only to use dark elements.
So that is the difference between importing the different components and different functions and not
different functions.
So once you are done with this and not just you can import.
People.
Not.
From.
Components flash, not enough.
So once you are importing this, let us use that in to.
So after this create area, I'll be using that.
I'll be using the North since Nautilus was in better known deals.
OK, so we'll check whether the changes that are on.
So as you can see here, we got a text saying not and also delete icon, but since we did not do any
styling for that using the cases, we haven't got any styles.
But it's fine.
We'll do that in the course of this project.
So we have achieved that note.
But instead of north, we won the title and the content that we give when we are adding when we are
clicking on this submit button.
So as you can see in our create area, when we are clicking on this button, we are distorting that
is not sending like calling this honor function.
And then after so it is getting stored in that node setting.
We also saw that by console logging the notes in the last few days.
If you want to once again a, you can check out the previous year.
So now we want that information.
This is not information, the content, the title and the content of that information to be sent as
a props so that we can use that in the note and then bring that one title and everything according to
that.
So now when send the props to that.
Not.
Key will be index.
So I want to know what the scheme means.
We'll see that after a few minutes.
So that Biden should be.
Note item Typekit.
No, it does not.
So now, like, for example, that item will be something by default, the title will be this.
And the content.
Contract will be something like the content of the test.
OK, so no one's using this props, we can hold a Prop 28, and instead of printing this note, I can
print.
Drops, not Typekit, drops not by.
Now, if you check over here, you are getting the title of the program that I signed into law from
the title, you can also print content.
Now you can see the content of the text we have seeing what I send as props.
Now we want to send this title and content based on the notes edit.
Since notes that it contains many items, it can be an array of size, five ideas off site, spend not
outside, and it can be anything.
So we have to use a fire loop so that we map each and every edit and we print accordingly to that.
So that's why we'll be using the map function on that note.
So we'll be.
Not not, not since it's a JavaScript code, we have to use that in brackets.
No, it's not math.
And then the note item note item is that like whenever the map function is going through each and every
iteration, that item that we are getting through the map function.
So initially it will be the items in next little and then I'd imagine the next one and subsequent alignment.
So once we get the item, you want to one day next, I'll be adding two parameters.
Once we got that.
We can use it.
So we can return.
A note over here.
So instead of here, we can trade on the inaugural.
So that looks good.
So when we are using like, as I said, the previous few days or even if I did not see it now, you
can make a note of this whenever you are using a map function.
Then if you are using any custom component that we are creating for the project instead of map function,
then it should have a unique ID.
OK.
So it should have a key and I.D. key will be index itself, and it will be also index.
That's why we are taking the next parameter to get the next item that we are rating, not the value
of the item.
So once we have both of them, then the title can be note item title, note item dot item.
And then the.
Content can be.
Not item, not content.
Not content.
So now we can use them instead of 96 to bring the item and the title and the content.
So initially it will be each one, each one will be prop stock item.
And then paragraph.
Well, Bill.
Thorpe's not counting.
So we can see the fighting and everything in the aftermath.
So I love not really because I don't want the business logic.
So once this is done.
Now you can check away, since you are not adding anything, we are not able to see anything.
So when I add this, you can see empty.
You can see and be entertained emboldened by the facts and content.
Then you can see the content is getting at it.
But as of now, the styling looks are some bad because we haven't styled anything, but we can see whenever
we are, we can see the note one by one adding one by one so that when we refresh on that, it becomes
empty again and you can.
See the genius.
Or you give some despondent clicking on it, exciting.
So now we have completed adding the note regarding the notes of the clicking on A. button, adding the
two items to the list in the next reader will see how to delete them whenever we click on this button.
Then it should go from the screen, right?
The how to delete that and off the left wing basically the styling part.
And then I'll have an overview of everything like finishing the product scan and see that in the next
reading.