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.