OK, so now we'll work on the transaction component.
So right now, I don't think we have a transaction, we have just the list of the transaction, but
now we'll create another component and we limit our transaction on Dargis or on our audience.
And so this what we will do is that, first of all, we create a boilerplate code or with this.
So that is the R a f.
Who did something like that?
And after that, we'll, first of all, important use context to.
By this, we lose context.
And next will come to.
And welcome to our return.
And Howard will include.
Most of all will create a list, and that list will be.
We don't want to move forward or something like that, we just have to give it a class name, so class
name.
Last name would be maybe minus.
No, sir.
Inside the fence, I created a label.
Oh my God.
I won't read a listing.
Nutrition labels on it is to rename it.
And this the list.
Inside this, what will do is that will display the transaction text, but right now we don't have any
dynamic text line.
Text is white liberals who have we will just try to.
Maybe we can write or.
Sadly or no sense, sadly.
Next, we'll have a spin inside this store, not.
OK.
What are you?
We'll have us back inside the sperm bag, we'll we'll have the sign.
So right now we are just hard coding and word after.
Sometimes we'll will be adding like feature to it and then we'll have an amount to us, maybe 50000.
So that's it, and then we'll have a button.
This button will be for deleting the transaction or deleting the history.
But right now, we are not adding any functionality to it.
So we'll just be as it is.
Why it's not providing the essentials, it provides school aid and inside this will just provide X,
which means they need.
So.
That's right.
But what it will do is that it will just show minus here, uh, like, uh, like minus or plus if I
do plus here on inside this school, what is I'm what I'm trying to say is that it should automatically
detect like, first of all, if you have entered plus sign while giving the input.
So in the history, you should automatically detect that it is a plus sign and you have to show green
folder.
So where I am talking about the green model, I'm talking about here and it should show the green border
when it does a plus sign.
And if this is a minus sign, there, sure, sure are.
Like this red color pink?
So that is what I'm trying to say is whatever we are doing here, is this this because of that?
Only two?
Maybe we can just do now, right?
Or like final function before that, what we need is that.
You'll have to import are.
Important context bar that will need for the delete button if we add a functionality to the delete button,
but right now I'm more interested in getting the glasses like dynamically who right now I hardcoded
this glass than glass.
But I want this glass to change.
We are to some minus sign.
And if the glass name is changing in the system, you can change the color of the water.
OK.
So for that, I will try just to.
I will write one line of one piece of code here that will be forced to resign and it can be called to.
From section.
On election board.
A moment.
If it's.
If it's like.
Less than zero, then you have to put it on a minus sign right now, I'm not doing for the class name,
I'm just doing for the sign class name we would do in the inland sea.
And if it's false and just on the plus side, OK, this is this of our design.
But how do we do about about the class name?
So for that, we'll write JavaScript insiders.
That's why I've provided the collaborators.
So here I'll write transaction the short amount if it's less than zero.
So what will be the class name?
The class name would be my.
Fine.
And if it's greater than zero, so the class name wouldn't be.
The last name would be plus.
OK, let me just say it.
And what is next is that we have to see how it is looking so far that we need to inform this inside
the transaction list, who will have to import it here because right now it's nowhere.
It's important to know that for now, I'm in that transaction list and I will import the transaction.
First of all, the transaction component, so I import.
Transaction from transaction 08, our team portrait for me.
So next, what we'll do is we'll.
Create the global context here, like we'll call the global context from importing it.
So how do we import it?
Will import?
Global context, global context from context, okay.
That is done.
Next, we'll.
And we've already exported this and also inside Britain, what will do is that history is already there.
Gold gold for us is already there.
Inside this, we will provide inside this unordered list.
We will provide some dynamic gate unlock.
So first of all, let me provide a class name for the stylings of class name would be list.
And inside this list, we'll provide some JavaScript to ward off group do that, we are going to use
the map function.
We are going to map all the transactions right one by one.
We have to map it and we have to print it, right?
So how do we like transaction?
Dark map.
Are.
Bond funds start map and inside this that is a function, so that will be coming back showing.
And a narrow function.
What it will do is have to like it done this transaction only transaction component and not transaction
is just a transaction which we import today, right, to have to have done this with some of the props.
So that will be a key and the key will be.
Sounds excellent or tidy.
And there will be transactions for.
Transaction is equal to.
Transaction, we can also use a separate operator, but you're just using this for now.
So let me close this after this, I have to close it.
And I guess things are.
For now.
There is some parrot here, which sees that I have not.
Yeah, because we have not created a context using their transactions.
So let me just go in this in the technical it.
I forgot to create this constant.
So it will be transactions.
And here it will be use context because we know you make use of the use context, right?
So inside this, that will be global context.
So let me just say it and now should work.
And.
OK, because I made a typo out of the spendings wrong transactions.
Spelling is wrong.
So let me just save it, and some action is not defined.
If there is a lot of missed out on this.
And he and.
OK.
Our ball and also do the wrong.
A lot of mistakes.
Transaction.
And also there a mistake.
Why aren't I am this is it being like coming from somewhere else?
Transactions and online?
No.
Or.
In.
Showing the error in the transaction, so basically, I need to pass this as an argument.
So transactions, so if I see it now should give me a proper thing.
So now if I go to the browser and I see there is some error and refreshing.
The church, to me, saw.
OK.
As an object.
And object, this is undefined on line and with six tons action and action list.
Let me just go to forward.
We'll here.
It is showing me in the transaction list that this is not defiance.
Wait, let me check.
We might lose all this while working on this long, you don't have to worry much about this soil while
courting, we'll.
We'll try to figure it out like water issue as of now.
Don't worry about this warnings and errors because we're not done with the project because as we progress
and Iran will resolve and we will be able to tackle what it's like happening to next, what we'll do
is we will add more functionality to the project and I just found the action list.
I'll add button also to delete the transaction to delete like history reader transaction from the history
so that we are going to do in the next review.