1 00:00:02,000 --> 00:00:04,000 So for this NewMeetup component 2 00:00:04,000 --> 00:00:08,000 we again create a function here a component function 3 00:00:08,000 --> 00:00:11,000 like the NewMeetupPage function. 4 00:00:11,000 --> 00:00:14,000 And of course, as before we need to export this 5 00:00:14,000 --> 00:00:17,000 so that NextJS is able to find this 6 00:00:17,000 --> 00:00:20,000 and then we can render our content here. 7 00:00:20,000 --> 00:00:23,000 Now our content in this case 8 00:00:23,000 --> 00:00:25,000 should be the NewMeetupForum component 9 00:00:25,000 --> 00:00:29,000 which I prepared in advance, which renders a form 10 00:00:29,000 --> 00:00:33,000 with some controls, with some styles attached 11 00:00:33,000 --> 00:00:36,000 using CSS modules here for styling. 12 00:00:36,000 --> 00:00:39,000 I'll come back to that in a second, that is supported 13 00:00:39,000 --> 00:00:43,000 by NextJS out of the box, which is really convenient. 14 00:00:43,000 --> 00:00:46,000 And then here we get that data. 15 00:00:46,000 --> 00:00:49,000 We extract that data, the user entered, with help offer Refs 16 00:00:49,000 --> 00:00:51,000 which has a built in React feature 17 00:00:51,000 --> 00:00:54,000 has nothing to do with NextJS. 18 00:00:54,000 --> 00:00:58,000 And then we basically call a function which we expect to get 19 00:00:58,000 --> 00:01:01,000 on the onAddMeetup prop. 20 00:01:01,000 --> 00:01:03,000 And to that function 21 00:01:03,000 --> 00:01:05,000 we then pass the collected meetup data. 22 00:01:05,000 --> 00:01:08,000 So this object with all the collected data. 23 00:01:09,000 --> 00:01:14,000 And hence now in this newMeetup index JS file here 24 00:01:14,000 --> 00:01:18,000 we can use that component and we can import newMeetupForm 25 00:01:20,000 --> 00:01:24,000 from going up two levels to leave the pages folder diving 26 00:01:24,000 --> 00:01:28,000 into the components folder, Meetups, and then newMeetupForm. 27 00:01:30,000 --> 00:01:32,000 And then we can return newMeetupForm 28 00:01:33,000 --> 00:01:36,000 this component like this if we want to. 29 00:01:37,000 --> 00:01:40,000 Now as I just mentioned, in this component 30 00:01:40,000 --> 00:01:44,000 we do expect that there will be a onAddMeetup prop 31 00:01:44,000 --> 00:01:46,000 which holds a function that we can call. 32 00:01:46,000 --> 00:01:48,000 And hence we might want to prepare 33 00:01:48,000 --> 00:01:50,000 this function here as well. 34 00:01:50,000 --> 00:01:53,000 We can add our addMeetupHandler function 35 00:01:53,000 --> 00:01:57,000 or however you want to name it and then pass a pointer 36 00:01:57,000 --> 00:02:02,000 after this function to the onAddMeetup prop a pointer 37 00:02:02,000 --> 00:02:05,000 and not the result of executing it. 38 00:02:05,000 --> 00:02:08,000 So no parentheses here, because this function 39 00:02:08,000 --> 00:02:12,000 should be executed eventually from inside that component, 40 00:02:12,000 --> 00:02:15,000 when the form is submitted as it turns out. 41 00:02:16,000 --> 00:02:19,000 Here, we then get our enteredMeetupData. 42 00:02:21,000 --> 00:02:23,000 And we can, for example, for the moment 43 00:02:23,000 --> 00:02:25,000 simply log this to the console. 44 00:02:27,000 --> 00:02:30,000 And with that out of the way, if we go back again 45 00:02:30,000 --> 00:02:34,000 we can visit localhost3000/newMeetup 46 00:02:34,000 --> 00:02:36,000 and we see this form again, 47 00:02:36,000 --> 00:02:40,000 not to final styling a bit too wide, 48 00:02:40,000 --> 00:02:41,000 but we see the form. 49 00:02:41,000 --> 00:02:44,000 And if I opened the developer tools here 50 00:02:44,000 --> 00:02:49,000 and I enter test and test, or here, we actually need a URL. 51 00:02:51,000 --> 00:02:54,000 So I will just quickly grab that URL 52 00:02:54,000 --> 00:02:57,000 which I set up for my dummy data, this URL 53 00:02:57,000 --> 00:03:01,000 I'll grab that and use this here Test Address. 54 00:03:01,000 --> 00:03:03,000 And This is a test. 55 00:03:03,000 --> 00:03:06,000 If we enter this data and we click Add Meetup 56 00:03:06,000 --> 00:03:09,000 we see this object logged to the console. 57 00:03:09,000 --> 00:03:11,000 So handling form submission works. 58 00:03:11,000 --> 00:03:14,000 Obviously we're not doing anything with that data. 59 00:03:14,000 --> 00:03:16,000 At this point, we're not navigating away 60 00:03:16,000 --> 00:03:19,000 and we are going to do all these things later 61 00:03:19,000 --> 00:03:22,000 but this again just shows us how we can use pages 62 00:03:22,000 --> 00:03:27,000 and also mix regular React components into those pages. 63 00:03:27,000 --> 00:03:30,000 And then, with that, that's a great start 64 00:03:30,000 --> 00:03:33,000 but now we're already facing a couple of issues here. 65 00:03:33,000 --> 00:03:35,000 We've got a lot of missing functionality, of course. 66 00:03:35,000 --> 00:03:38,000 And for example, we also have no way 67 00:03:38,000 --> 00:03:41,000 for navigating between pages 68 00:03:41,000 --> 00:03:45,000 and we have no general layout around our pages. 69 00:03:45,000 --> 00:03:48,000 Every page takes up the entire width. 70 00:03:48,000 --> 00:03:50,000 We get no header above them. 71 00:03:50,000 --> 00:03:53,000 And that is probably something we want to change.