Now we are going to convert this functional base to cost base.
So first we are going to import the component here
and then we are going to change data to across cross and then we did it this one and use expands component.
After that we are not going to use the use day because this is not a functional component.
We are going to use the constructor.
Now we put the super props and definitely put all the stay inside that beach ball state.
Now we have the cost.
So we used to cause
and then we copy these away
and put it here and also we add this so cost
and it is already what is true.
Now we do not have that constant here in this.
We are going to use these thoughts that say
we have so-called and don't they don't show card
also we do not have.
We cannot say the cards only.
We need to set these state of cards.
And I think we can do this this too although we have to use these thoughts at state and then cards and
then cards copy.
We could add a bracket here.
Now we can delete this one again.
These do not have constant we can change this.
We can copy this one and paste it here or there is likely to put inside a render functions so we add
or when the function here that we turn also to put inside a render function
you take this out and paste inside a random function.
Now you said the cost is not defined in 77.
Yes because we do not have cost.
We have these sorts of detailed costs and also we do not have to talk go show card.
We have this thought
Togo show card and at the 70
is to also need to edit this doc
64 Keystone State not so card.
And also we have to use this thought they thought cost.
I think we should go to go and I think we also need to copy this function to the other button.
Now we can take a look to see whether it can work well and that refresh this if we did it it already
changed Qatar.
It already changed color again when only have one card.
Let's try to type somewhere it also can change the name.
So this is you find and in the next part we are going to change the card.
Also.