Original subtitles

So for this NewMeetup component

we again create a function here a component function

like the NewMeetupPage function.

And of course, as before we need to export this

so that NextJS is able to find this

and then we can render our content here.

Now our content in this case

should be the NewMeetupForum component

which I prepared in advance, which renders a form

with some controls, with some styles attached

using CSS modules here for styling.

I'll come back to that in a second, that is supported

by NextJS out of the box, which is really convenient.

And then here we get that data.

We extract that data, the user entered, with help offer Refs

which has a built in React feature

has nothing to do with NextJS.

And then we basically call a function which we expect to get

on the onAddMeetup prop.

And to that function

we then pass the collected meetup data.

So this object with all the collected data.

And hence now in this newMeetup index JS file here

we can use that component and we can import newMeetupForm

from going up two levels to leave the pages folder diving

into the components folder, Meetups, and then newMeetupForm.

And then we can return newMeetupForm

this component like this if we want to.

Now as I just mentioned, in this component

we do expect that there will be a onAddMeetup prop

which holds a function that we can call.

And hence we might want to prepare

this function here as well.

We can add our addMeetupHandler function

or however you want to name it and then pass a pointer

after this function to the onAddMeetup prop a pointer

and not the result of executing it.

So no parentheses here, because this function

should be executed eventually from inside that component,

when the form is submitted as it turns out.

Here, we then get our enteredMeetupData.

And we can, for example, for the moment

simply log this to the console.

And with that out of the way, if we go back again

we can visit localhost3000/newMeetup

and we see this form again,

not to final styling a bit too wide,

but we see the form.

And if I opened the developer tools here

and I enter test and test, or here, we actually need a URL.

So I will just quickly grab that URL

which I set up for my dummy data, this URL

I'll grab that and use this here Test Address.

And This is a test.

If we enter this data and we click Add Meetup

we see this object logged to the console.

So handling form submission works.

Obviously we're not doing anything with that data.

At this point, we're not navigating away

and we are going to do all these things later

but this again just shows us how we can use pages

and also mix regular React components into those pages.

And then, with that, that's a great start

but now we're already facing a couple of issues here.

We've got a lot of missing functionality, of course.

And for example, we also have no way

for navigating between pages

and we have no general layout around our pages.

Every page takes up the entire width.

We get no header above them.

And that is probably something we want to change.