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.