Welcome back.
In this video.
Let's work on the account details.
But before we continue on, let's change this text to total income, total expenses, and let's see
balance.
Let's go to the component dashboard and then the account summary.
So here I will make it as total income.
And next is scroll down and we're going to see total orders here.
Change this one to total expenses.
And lastly, I'm going to be the balance that we have.
So I'll change this one to balance.
All right.
So let's see.
Yeah, I think this one is okay.
So what we are going to do is that when we click on the View account, I want to display the account
details component.
And for that one too, I'm going to provide the component for you.
So here we go.
Inside the dashboard, I'm going to copy the account details component and this is the account details
component.
So let's go ahead and then render that.
So inside the app, let's require the account details.
And this I'm going to be a dynamic component.
So we're going to provide a param.
So let me copy this one and change this one to account details.
And here is going to be let me look at the path.
Well, we're going to be account details for slash ID, so here you go, account dash details and for
slash colon ID, I'll make this one as account ID.
All right, So now let's refresh it and let's see.
And I need to require the link component from React Router Dom.
So here let's require the link component and now everything will be set.
Let's refresh it.
And well, I got some error here because I'm trying to access some property, but it doesn't exist.
So let's see more about that.
Why are we getting that error?
So let's go to the console and above.
Okay, in the link component cannot read path undefined.
So let's read more about that inside the component of link.
Let's see if we have some dynamic value here where we need to provide the two attributes because I have
commented that one out.
That is why.
So let's remove this one.
And next is let's also bring this one here and let's remove the dynamic ID, or I can provide any ID
here.
It's okay.
And now React is happy and this is the account details.
So let me change the text to the name of the account.
So here I'm going to be the name of the account.
For the meantime, I'll call this one as mom's building.
And for the text, you can change it.
Right.
Great.
So I'm going to populate this one with a read name of my account.
For the meantime, let's maintain this one.
The next step is that I want to display the list of account down here, and I have a component for that.
So here we go.
I'm going to provide that component also for you.
So inside the dashboard, let me place that in here and inside the account details.
Let's require the account list, all transactions.
And here we go.
I'm going to place it down here.
And let me remove this comment.
All right.
So let me remove the prop here for the meantime.
So let's save it and let's see the account list.
Or you can see the account is not defined.
So let's go to the transaction component.
So here we can trick JavaScript to be able to use the variable called account.
So is equal to undefined or an object.
Yes.
So now let's save it.
And now let's see.
And here we are going to display the list of transactions from the back end.
So now we have the components ready.
What has left is about creating the action to find a single account.
Let's get into that in the next video.