Excellent.
We've got a structure now, of course, let's set up the functionality first, I guess let's test whether
we can see the control log when we click on.
Yes, that would be a first step, Nerdist.
Now we have a world, of course, an inside handle some.
But the first thing that I would want is to call set text.
So that is going to set up my text and I just want to pass in data whatever array I'm getting back from
my dad address.
I would just want to pass it into text since that way we could set up the iteration as well.
So I'm going to go with some text and I'll just pass in the data again.
If you need to console it, please do so.
But I can tell you right away that it is an array with eight items.
And now where I have the alarm text, I'm not going to add those paragraphs, of course, manually.
What I would want instead is to go with text.
Then I'll use my map method and then I'll iterate over my text right now.
And here I'm just going to call this item and then the index since I have the list as well.
And then we're going to go with paragraphs.
So we're returning a paragraph and let's add a key and the value will be indexed.
And in here I would want to see the item.
So what I'm doing in the objects or I guess in the data as I have my array of text and then each item
is this string.
So that is going to be my paragraph.
I'm not in the app, JSM iterating over.
I'm creating paragraphs for every item in that array and then I just grab that string and push inside
of that paragraph.
So what you should notice by default, of course, there's going to be no text, but then if we click
on Generated, we can just get all these eight paragraphs, which is awesome.
So now of course, we would need to start working with our values because, yeah, it is nice to pass
in the whole array, but the whole idea is that we would control how many paragraphs we would want.
And I'm here, of course we can access the account.
Correct.
Because what's really cool, since we have right now the controlled input in the handle segment, I
can just check what is the account value in the state.
So if a log count, you'll see that every time we change the value and then we click on generator,
now it says, well, we're getting six.
So now in here I'm going to go three.
And there is now, of course, I have the three now one Gotcher here is that even though the type is
number, essentially what you're getting back is a string.
So if you don't believe me, you can type here type of count and you'll notice that even though technically
you would expect this one to be number, essentially it is a string.
Now, I can honestly say that in this scenario, the functionality we're about to set up technically
doesn't matter.
But I still want to point that out.
This gotcha.
And that's why I'll show you how you would fix it if there's going to be some cases where you actually
would want it to be a number.
Again, in our case, functionality will work regardless.
But I thought that it was a important point that I definitely wanted to make.
So I'm going to create a new variable and I'm going to use that on purpose.
And that is going to be equal to amount and I'm going to pass.
And so I have my function where I just get the current value.
So that way, even though it is a string, so essentially I'm getting back the string from the number
one side, one percent, you'll see that, of course, it is going to be a number again.
Don't believe me.
You can just log the amount and you'll see that even though originally it was a string, now it is a
number.
I can definitely see that even without a running type of because the color is below.
So the for numbers color will be blue and for the string, of course it is going to be a black.
OK, so I've got my amount.
So now let's start using it where I have set text.
And then I have my full data, all right, now, I don't want to display all eight paragraphs, correct.
I would want to display as many paragraphs as the user wants.
So if the user wants to, I need to come up with a way where I can remove some items from the array
where essentially I only display the items that the user is requesting.
And in this case, we can use slice method on the array, not slice will return a new copy.
And then we select items from start to the end.
Now the end is not included and those start and unbias represent indexes.
So if I go slice and if I say zero and comma, that means that I'm going to be selecting from the start
of the array and that whatever is the end.
So whatever is the value for end now, the end is not included.
So you need to keep that in mind because later it is going to be important where I'm going to go with
amount.
So that is when I'm passing in.
And now if we go with correct values, because there's still a little bit of gotcha, we should see
some paragraphs on the screen.
So if I go, for example, with one, I should generate one.
If I go to then of course I'm going to go to and then so on and so forth.
Now the educations are going to be if I go, we have negative, OK, because at the moment if someone
goes bananas and it just displays all the items, or you'll also notice that if we refresh, for example,
and if I go with, I don't know, 10 or whatever, something above eight, again, I'm going to get
all the items, which is kind of OK.
But I would want to have a bit stricter set up here in my function where I would want to check.
Hey, listen, what is the value for the count?
And depending on that, I'll change the value for the amount as well.
I'm going to say, if count is less or equal to zero, what I would want is a set up amount equal to
one.
So if that is the case, just this one program.
And the second thing is if the count is bigger than eight, then always, always make sure that the
amount will be equal to eight.
And with that in place, I can just say what I notice here, how the amount is equal to it.
So what happens since I have eight items in my data?
Just the last index will be seven.
So in here, if it is bigger than eight and that means that amount will be equal to it.
Now the thing is, the end is not included.
So when we are looking at the set up, don't think that just because the last the seven and I'm spending
is equal to that, there is going to be that one last empty value.
No, because it ends up to that and value.
So the end value is not included.
However, the first one, of course, in my case, zero, that one is included.
So if I never get back.
Now I have my functionality where I can generate two or I can generate one, and if I go with zero,
if I go with negative and if I remove items altogether, I'll always, always have this one paragraph.
And then if I go with, I don't know, 50, then of course I'll generate my max of eight, which of
course, in your case, if you have more paragraph's, you can definitely display more paragraph's.
So that's our application.
Hopefully everyone enjoy the project and I hope to see your next one.