All language subtitles for 023 Adding a Form_en

Now that we're able to render a couple

of meetups there,

with help of our MeetupList and MeetupItem components,

it would of course be good if those meetups would not come

from our dummy_data source, but from an actual server.

And they should actually end up

on that server because we created them

on the add new meetup page.

After all, that's the goal

of this demo application that on this add page,

we have a nice little form for entering data about a meetup,

so entering this kind of data in the end

and then that data should be sent to some server

to some backend where it's then also stored in a database

so that then it can be fetched and loaded in all meetups.

By doing that, meetups that are added here,

could be shared with all visitors from all over the world,

since data is stored in a database on some backend server,

not just in our browser and the data would also be there

if we reload the page.

If we just store data in memory,

any data is lost if we reload the page,

because the JavaScript application restarts

and the previous state is lost.

And therefore the first step is to add this form

to this add new meetup page.

So that then in a second step,

we can gather the entered data and send it to a server.

And for this will work in this NewMeetup.js file

which is the file that should render this meetup form.

So in here, I'll actually also add a section

and the h1 title of add new meetup,

but then below that,

I wanna output the meetup form

which I will actually create

and store in a separate file

to again keep this NewMeetupPage clean.

Now a good folder would be the meetups folder

in the component folder.

And therefore, in here, we can add a new file,

the NewMeetupForm file, for example, NewMeetupForm.js.

Now attached again, you find a styling file for this file,

the NewMeetupForm.module.css

which you can just download

and add next to this JavaScript file

so that you have some styles, which I prepared for you.

And in the NewMeetupForm.js file,

we now create another function,

because we're going to create another component.

The NewMeetupForm function and component

which just as before is exported here

to make it availble outside of this file.

In the NewMeetupPage component,

below this title,

we can then already add that NewMeetupForm.

Make sure you also add the appropriate import.

Now, once you did add it back into NewMeetupForm.js file,

we can start with outputting the JSX code for the form.

Now I wanna actually wrap this form again

in this card to give it to this card look

and that's why I created

that separate card component before.

So that we can now reuse that component.

So now, besides using the card component

in the MeetupItem component, we can also use it

in the NewMeetupForm simply by using it here

and of course by importing it,

you always need to import what you use

in a file from the UI folder and the card file.

Now card will then be wrapped around the actual HTML form

that we'll create and then we'll well populate

that form with various inputs.

Now I did provide that css file for the form.

So that's also already import classes

from ./NewMeetupForm.module.css

to have these scoped styles.

And we can start assigning classes on that form element

where you should assign the form class like this.

Now inside of this form,

you can of course structure this however you want,

but to fit the styles which I provided to you,

I'll add a div with a class of classes control.

And in that div I wanna have a label where we say,

Meetup Title, for example,

for the first input we're going to add.

Now that input is added here and is of type text.

It should be required,

so that we have that in-browser validation.

And I will give it an ID of title and then self close it

and now connect this label

to this input by adding the for attribute,

but just as class, for is a keyword in JavaScript

and therefore the actual property name

for setting this, for value or

for setting this attribute here is htmlFor.

So I add htmlFor as a prop

and that's another exception besides classname

where you use a attribute name that deviates

from the regular HTML attribute name.

It's basically the only other important exception,

besides classname, which you have to memorize.

And then we point at title here.

And this simply connects this label

to this title for screen readers

and other assistive technologies.

Now we have this input with this label here

and we can now repeat this entire control div,

multiple times to also render a label

for the meetup image and maybe use an id

of image here and change this to type url.

Since the image set here should actually be a url pointing

at an image.

If you're interested in uploading files with react,

that is not really that much of a react task,

but mostly a backend server task.

And hence I discuss file uploads

in my node JS course, for example,

but to learn how to make file uploads work with react,

I also have a resource attached, a tutorial

which you can take a closer look at

to learn how to upload files with react.

Here we'll not upload files.

We'll just insert the URL of a existing image

which already exists on some server.

Then we can, let's replicate this div again

for our address here, let's say

and the id could be address.

And here we'll again, just have some plain text

as an input type and there after,

I wanna have one more control

which is the actual description of the meetup.

And hence we could use description as an id,

but here I'll actually not render an input,

but instead a text area,

which is another default HTML element.

It'll still get that id description here.

And it will also still get the required attribute

for adding this in-browser validation.

And I'll set rows to five.

That's another default attribute,

which we can add to text areas.

Now last but not least, below that,

I'll add another div with a class name of classes, actions.

And in there I wanna have the button that submits the form.

So here we can add a button where we say Add Meetup.

And that button will then submit that form.

That's how HTML in the browser works.

If you have a button in a form,

a button which is not of type button.

So if you have a regular button like this,

then such a button will submit that form.

And we can later listen to that submit event.

And this should be actions as a class here.

And with that, if you save that file,

you should see this form on the screen.

Now the form doesn't work yet, but it's there.