Turn off.
We boarding certain functionalities from material QR code that we need in our application, first of
them is typography and the mixed dyes and a box.
So let's just import typography and apart from typography, we need to make styles.
As well as the box.
So now if I see a made a typo in the word typography Devi, you added B actually, it should be right
now.
Let's just create the first imported from our materials.
Material you
now inside this, we're going to have a functional component, let's just name it, concert balance.
And this is going to receive a parameter and exploded.
Now, as you might recall, in an outdoor jazz, we are transferring your transactions right and a balance
component of your transfer.
We are transferring transactions, so that's what we're going to do, structuring our balance.
So let's just restructure the props that we're getting.
No, it is going to even have a written statement, right?
Now, before we do any before we go any further, we would like to calculate the amount of money that
we have in our balance so that we can configure it.
So for that purpose prior to a written statement.
We'll just create a constant and this is going to have the amount of transactions or the money that
we have in that account, so let's just transactions and mapping it to get the amount of money that
we have and inside it, we're going to have transactions that transaction.
And there's going to turn us transaction dark among its save.
You might recall in our approach is the amount of money that we have.
Is going to have an I.D. property, a text as that amount, so this is the one that we're targeting
with.
So let's head back to a balanced address and.
For some reason, my pressure doesn't seem to be working, but let us see that see to it later.
So this is a function that we are currently processing now.
OK, so now packing them up along.
Now we want the total amount of money out, so let's create another constant and name total.
And we will have an amount.
Not reduce.
And inside the reduced they'll be having.
Amount.
And item.
And this is going to give us a function, and this time will just amount plus.
Because I'm owned.
Plus the item.
And this is going to be zero.
Two fixed to.
No, just put up a.
Now I will be having a box inside a written statement.
And this box is going to close a closing parameter and typography, no, this is going to have a class
name that we are yet to configure.
So let's not put it right now and we'll give it.
A total of our balance amount that we have.
They've put up a dollar sign and curly braces and total.
Now, if you look at the line number five, you will see that it is having to do something right.
So if you are aware about JavaScript, then you might know what to do something does it execute?
A user supplied reduced callback function on each element of the error that we are passing to it and
passing a return value from the calculations on preceding elements.
So ultimately, what it does is that it sums up all the elements of it.
So what we are doing over here is that we are summing up all the amount of money that we have.
And if you are wondering what that to fixes for, so ultimately what it is going to do, it is going
to fix our decimal point or to, for example, if I am having in my daughter look on a balance of forty
seven point seven, seven six and I made it fixed for two.
So what it it is going to return us.
Forty seven, forty seven.
Point seven, eight.
Because I just fixed the drowning numbers to do so all that, I'm going to be getting the two decimal
points.
So that is what this to expansion function is.
So that we have configured it now, it's time to make stiles into it application.
So let's add styles for now.
So let's head back outside our function and we'll be creating a contest use style.
And we will be making styles, make styles.
And this is again going to have an object.
And let's just name it.
That's just mean the key is balance.
And seizes properties that we want in our balance, just the fun size property want.
So then we give it up on stays of, let's say, about.
Twenty.
Now just hit save, and next thing will do is they structure this.
In the second set of classes.
And it is going to use stealth.
And now inside the box typography.
Will you add a class name of classes or balance?