Well, I hope by now we definitely know the drill, we're going to navigate back to our people who are
looking for lower ipsum.
That is the project name and then, of course, the set up.
So I'm going to open up the integrated terminal.
At the moment.
I'm already en route so I can simply say city and I'm looking for my Sharipova.
Once I'm here, I'm going to run NPM install on right away and ampm start as well, which of course
will open up my server wants.
The dependencies have been installed in a localhost three thousand as far as the project set up.
If we check out the source, of course, we have the abcess that is already expected, but then all
our data, so our paragraphs are going to be in there.
Yes.
And then I have my area, of course, by the name of text and order here, how I have the paragraphs.
So in your case, if you want to add more data, so if you want to add more paragraphs, definitely
feel free to do so.
And then, of course, instead of displaying my max, which is eight paragraphs, you can display more.
And again, if we navigate, you have jurors, we just import this data array, meaning I call this
array in the ambiguous data, even though in the actual file it is called text.
But then since I'm exporting as default, I can call it whatever I would want.
Now again, it open up on a big brother, which is good.
But I also need to open up a small one.
And now let's just set up our structure.
So essentially I'm talking about the form, I'm talking about the input and where eventually we will
display our text now functionality coming up in the next video.
But we always, always need our structure first.
I'll start by setting up two state values and I think I can make this one bigger.
Just going to make a little bit more sense.
And one is going to be for the count.
So how many paragraphs I would want to generate and I'll go with that count as well, of course, as
well.
I'm not as equal to my use state hook and I'll start with zero.
So initially the value will be zero and the next thing is going to be the text.
So it's going to be an array of those paragraphs.
But I'll start with the default value and that value will be empty.
So go with context and set text and that is equal to year's state.
And then I pass in my empty array of beautiful than I would want to work on my return.
So of course I go with section.
Now, that section will have a class, because I would want to start a little bit, so Section Santore,
we're going to add some herring right here.
So let's just delete whatever text we currently have in the section and we're going to start herring
three tired of boring lorem ipsum, some over here than the question mark.
And now it's our form.
So save and then we're going to go with form.
Now we don't need the action.
We're going to have our own handle submit.
So let's just add class name, class name here.
And that is going to be equal to a lorem form.
And let's also add on some, but not for the time being, there's just going to be a placeholder function
and outlandish handle and then met.
All right, beautiful.
And then, of course, since I don't want to react to complain too much, I'm going to go with Handal
and those I've met.
That is my function.
Since it's going to be called on submit, yeah, for sure, I would want access to the event object
and also right away prevent and then default, since I wouldn't want unnecessary page refreshers and
since I would also want to check it out whether everything works as far as the connection, I'm going
to go with Hello World.
OK, beautiful.
Now once I have my own submit, everything is in good shape.
I think I can go with my label, so let's go with label and I'll add it to my input as well.
And that idea eventually will be amount.
And in here I'm going to go with Paragraph's Luxo and the Colon.
So let's say we should have something like this on the screen.
OK, I'm going to zoom in a little bit just so you can see it better.
And then right next to the label, I'm going to go with input and type will be a little bit different.
It's going to be a number.
Then I'll add a name amount.
And also the idea of amount not telling honestly, we can skip the name, but since we just covered
in tutorial how we work with forms and all that, let's just add it in this project as well.
So in some other projects later that we're working on, definitely names will be important since already
in Tutorial I showed you some examples where the names are useful, but in this case I just went with
the flow and I added the name.
There's really no use for it.
I can tell you that right away.
And then since I have the input and since I would want to have the on change and value, so essentially
I would want to have a controlled input.
All right.
Or set up my value attribute to be equal to my count.
So that, of course, is my stated value.
And then I'll set up the Ondrej.
So as I'm changing the value design, I'll also change that count in my state.
So it go it on change and we bravely pass in the inline function where I say that, yep, I'm going
to be looking for event object and every time I change something in my input, I'm going to go set count
and I'll pass an event, then target and then of course the value.
So now of course I have the control, the input and also I would want the buttons right within the form.
I'm going to go with button.
That button has to be a submit, of course, and we're going to go here with type.
And of course that will be submit a button and then let's add a class name here as well.
So class name and we're going to go with Beaton.
And now I have the button board.
I have the text message so that just type your generate work.
So let's save the rest.
Now we have the button as well.
And then right after the form, we're going to have the article where we'll display the text.
So there's going to be some iteration over that array.
That's the reason why we're setting up this text.
Right.
But for now, let's just add some kind of dummy value.
So we're going to go with article and line, what's our class name right away.
So class name and we're going to go with a lower text.
OK, let's say it.
And now let's add, I don't know, maybe two paragraphs.
So I'm I'm not going to go with too many words.
I think I'm going to go ten and let's just copy and paste.
And I would want two of these paragraphs if I copy and paste and I have two paragraphs, so essentially
this is how it's going to look like now.
Again, eventually what we're going to do is change the value formula when we call and submit.
So once we actually generate that text, we'll change this value, will add some paragraphs to this
text there.
And then, of course, in here we'll also iterate over.
For now, we just have these static data that should be are set up and of course, we can set up on
functionality.