1 00:00:02,000 --> 00:00:04,000 Now to handle the form submission, 2 00:00:04,000 --> 00:00:06,000 we got to do two main things, 3 00:00:06,000 --> 00:00:09,000 we have to listen to the form submission. 4 00:00:09,000 --> 00:00:13,000 And we then actually have to prevent the browser default, 5 00:00:13,000 --> 00:00:17,000 which is that it sends an HTTP request automatically, 6 00:00:17,000 --> 00:00:19,000 and hence it would reload the page. 7 00:00:19,000 --> 00:00:22,000 We wanna prevent this and instead handle the submission 8 00:00:22,000 --> 00:00:26,000 with JavaScript with react. 9 00:00:26,000 --> 00:00:28,000 And in addition to that, we of course, 10 00:00:28,000 --> 00:00:30,000 need to read the entered values, 11 00:00:30,000 --> 00:00:34,000 we need to get the actual input the user entered. 12 00:00:35,000 --> 00:00:37,000 Let's start with the form submission. 13 00:00:37,000 --> 00:00:39,000 To listen for that submission, 14 00:00:39,000 --> 00:00:42,000 we can add the on submit prop on the form, 15 00:00:42,000 --> 00:00:46,000 because by default, a submit event will be emitted 16 00:00:46,000 --> 00:00:49,000 if you have a button in a form and that button is clicked. 17 00:00:49,000 --> 00:00:52,000 And we can then catch this submit event here 18 00:00:52,000 --> 00:00:56,000 and run our own logic with help of that on submit prop. 19 00:00:56,000 --> 00:00:59,000 Now I will add another nested function 20 00:00:59,000 --> 00:01:02,000 in the new meetup forum component function, 21 00:01:02,000 --> 00:01:05,000 let's say the submit handler, which should be triggered 22 00:01:05,000 --> 00:01:10,000 when the submit event occurs by connecting function 23 00:01:10,000 --> 00:01:12,000 and on submit like this. 24 00:01:13,000 --> 00:01:15,000 But as I mentioned, a couple of seconds ago, 25 00:01:15,000 --> 00:01:19,000 the default behavior of the browser would actually be 26 00:01:19,000 --> 00:01:20,000 that it sends a request 27 00:01:20,000 --> 00:01:24,000 to the server serving this page automatically. 28 00:01:24,000 --> 00:01:28,000 And we don't want that we don't want that browser default. 29 00:01:28,000 --> 00:01:31,000 Instead, we wanna prevent that default, 30 00:01:31,000 --> 00:01:34,000 and run our own JavaScript logic. 31 00:01:34,000 --> 00:01:36,000 That might and still involve 32 00:01:36,000 --> 00:01:38,000 that we send that HTTP request later. 33 00:01:38,000 --> 00:01:42,000 But we wanna send that request behind the scenes 34 00:01:42,000 --> 00:01:44,000 without reloading the page, 35 00:01:44,000 --> 00:01:46,000 which is what would happen 36 00:01:46,000 --> 00:01:49,000 if the browser does its default thing. 37 00:01:49,000 --> 00:01:53,000 Now, thankfully, preventing that browser default is simple. 38 00:01:53,000 --> 00:01:57,000 We will get an event object automatically here. 39 00:01:57,000 --> 00:02:01,000 Because all those built in events like on click, on submit 40 00:02:01,000 --> 00:02:04,000 and all the other events to which we can listen, 41 00:02:04,000 --> 00:02:05,000 for all those events, 42 00:02:05,000 --> 00:02:09,000 react will automatically pass an event argument 43 00:02:09,000 --> 00:02:13,000 into the function that is executed for those events. 44 00:02:13,000 --> 00:02:16,000 This argument which we can accept here as a parameter, 45 00:02:16,000 --> 00:02:21,000 and this event object will have a prevent default method, 46 00:02:22,000 --> 00:02:25,000 which we can call to prevent the browser default. 47 00:02:26,000 --> 00:02:29,000 That's actually not even react specific, 48 00:02:29,000 --> 00:02:31,000 this event object and this method, 49 00:02:31,000 --> 00:02:34,000 that is a Vanilla JavaScript, 50 00:02:34,000 --> 00:02:36,000 which is fully supported by react. 51 00:02:37,000 --> 00:02:40,000 So that will prevent that browser default, 52 00:02:40,000 --> 00:02:43,000 and will allow us to fully handle the submission 53 00:02:43,000 --> 00:02:46,000 with just JavaScript and react. 54 00:02:48,000 --> 00:02:49,000 So that's step one. 55 00:02:49,000 --> 00:02:54,000 Now we need to find a way of reading those entered values. 56 00:02:55,000 --> 00:02:58,000 For reading the entered values, 57 00:02:58,000 --> 00:03:01,000 we got two main ways of handling this, 58 00:03:01,000 --> 00:03:05,000 we can use use state again, 59 00:03:05,000 --> 00:03:10,000 and add the on change event listener to all those inputs, 60 00:03:10,000 --> 00:03:12,000 which will in the end trigger a function 61 00:03:12,000 --> 00:03:17,000 for every keystroke, and then we can extract that value, 62 00:03:17,000 --> 00:03:19,000 the user entered from the event object 63 00:03:19,000 --> 00:03:21,000 which will receive for that event, 64 00:03:21,000 --> 00:03:24,000 and update our state for that given input 65 00:03:24,000 --> 00:03:26,000 with the entered value. 66 00:03:26,000 --> 00:03:28,000 That would allow us to keep track 67 00:03:28,000 --> 00:03:31,000 of what the user entered with every keystroke. 68 00:03:31,000 --> 00:03:35,000 But here I'm actually only interested in the user input once 69 00:03:35,000 --> 00:03:37,000 when the form is submitted. 70 00:03:37,000 --> 00:03:38,000 And for this, 71 00:03:38,000 --> 00:03:41,000 we can use a number a concept built into react, 72 00:03:41,000 --> 00:03:43,000 the concept of refs. 73 00:03:43,000 --> 00:03:45,000 Now ref stands for reference. 74 00:03:45,000 --> 00:03:47,000 And react simply allows us 75 00:03:47,000 --> 00:03:52,000 to set up references cue DOM elements, 76 00:03:52,000 --> 00:03:56,000 so we can get direct access to DOM elements. 77 00:03:56,000 --> 00:04:00,000 To set up such a reference such a connection, 78 00:04:00,000 --> 00:04:05,000 we first of all have to import the use ref hook from react. 79 00:04:05,000 --> 00:04:07,000 So just like use state, 80 00:04:07,000 --> 00:04:11,000 that's another built in special function offered by react 81 00:04:11,000 --> 00:04:16,000 which we can execute in our functional components. 82 00:04:16,000 --> 00:04:18,000 And we can execute use ref here. 83 00:04:18,000 --> 00:04:23,000 And with that, we create a ref object, a reference object 84 00:04:23,000 --> 00:04:27,000 and we can store this in a constant and we could name it, 85 00:04:27,000 --> 00:04:31,000 title input ref, because my first ref here should be 86 00:04:31,000 --> 00:04:33,000 for this title input. 87 00:04:34,000 --> 00:04:37,000 Now to connect this created object to this input, 88 00:04:37,000 --> 00:04:41,000 we add another special prop to this HTML element. 89 00:04:41,000 --> 00:04:45,000 And now very special prop besides the key prop, 90 00:04:45,000 --> 00:04:46,000 which is built into react 91 00:04:46,000 --> 00:04:51,000 and supported on all elements out of the box, 92 00:04:51,000 --> 00:04:53,000 and that's the ref prop. 93 00:04:53,000 --> 00:04:56,000 We add the ref prop to this input 94 00:04:56,000 --> 00:05:00,000 and as a value, we point at this title input ref, 95 00:05:01,000 --> 00:05:05,000 this will establish a connection and will give us access 96 00:05:05,000 --> 00:05:08,000 to this input element through this ref object. 97 00:05:09,000 --> 00:05:12,000 So here in this submit handler, 98 00:05:12,000 --> 00:05:15,000 we can then get the entered title. 99 00:05:15,000 --> 00:05:18,000 So the concrete value the user entered 100 00:05:18,000 --> 00:05:20,000 by using that title input ref. 101 00:05:21,000 --> 00:05:24,000 And then they're actually dot current, 102 00:05:24,000 --> 00:05:29,000 all those ref objects created with the use ref, were x such 103 00:05:29,000 --> 00:05:31,000 that they have a current property, 104 00:05:31,000 --> 00:05:34,000 which then holds the actual connected value. 105 00:05:34,000 --> 00:05:35,000 And therefore it's not current, 106 00:05:35,000 --> 00:05:38,000 which then holds this input element object, 107 00:05:38,000 --> 00:05:42,000 the JavaScript representation of that input element. 108 00:05:42,000 --> 00:05:47,000 And all those input elements have a value property. 109 00:05:47,000 --> 00:05:49,000 That's just how JavaScript works. 110 00:05:49,000 --> 00:05:53,000 The JavaScript object representing an input element 111 00:05:53,000 --> 00:05:55,000 has a value property. 112 00:05:55,000 --> 00:06:00,000 And that value property holds the currently entered value 113 00:06:00,000 --> 00:06:02,000 of that input. 114 00:06:02,000 --> 00:06:05,000 So that's how we can extract what the user entered. 115 00:06:06,000 --> 00:06:09,000 We could also change it, 116 00:06:09,000 --> 00:06:13,000 we could set value to some new value. 117 00:06:13,000 --> 00:06:16,000 But we shouldn't really do that. 118 00:06:16,000 --> 00:06:18,000 If you wanna change what's output on the screen, 119 00:06:18,000 --> 00:06:21,000 use state for data and stat. 120 00:06:21,000 --> 00:06:25,000 But for reading input, for reading values, 121 00:06:25,000 --> 00:06:28,000 refs can be a very useful tool. 122 00:06:28,000 --> 00:06:31,000 And here we are reading what the user entered. 123 00:06:33,000 --> 00:06:36,000 Now, we can repeat that for the other inputs, 124 00:06:36,000 --> 00:06:38,000 simply by creating more reps, 125 00:06:38,000 --> 00:06:42,000 you can have more than one ref per component. 126 00:06:42,000 --> 00:06:47,000 So here, I also create the image, input ref, like this, 127 00:06:50,000 --> 00:06:54,000 and I'll already copy that a couple of times, 128 00:06:54,000 --> 00:06:57,000 and also create the address input ref 129 00:06:57,000 --> 00:07:02,000 and the description, input ref. 130 00:07:02,000 --> 00:07:06,000 And then we connect those refs with the ref property. 131 00:07:06,000 --> 00:07:10,000 Here on the image, we connect this to image input ref. 132 00:07:10,000 --> 00:07:14,000 For the address, we connect us to address input ref. 133 00:07:14,000 --> 00:07:18,000 And on the text area, which is there to enter a description, 134 00:07:18,000 --> 00:07:20,000 we connect the description input ref. 135 00:07:23,000 --> 00:07:25,000 Now with that, we can extract all 136 00:07:25,000 --> 00:07:28,000 those entered values in the submit handler. 137 00:07:28,000 --> 00:07:32,000 So we get the entered image with whips 138 00:07:32,000 --> 00:07:35,000 with image input ref.current.value, 139 00:07:37,000 --> 00:07:40,000 we got the entered address 140 00:07:40,000 --> 00:07:43,000 with the address input ref.current.value. 141 00:07:44,000 --> 00:07:47,000 And we got the entered description 142 00:07:47,000 --> 00:07:52,000 by using the description input ref current.value. 143 00:07:53,000 --> 00:07:57,000 And that then allows us to create a new object, 144 00:07:57,000 --> 00:08:01,000 let's say, the meetup data object, 145 00:08:02,000 --> 00:08:06,000 which then has a couple of keys, like let's say title, 146 00:08:06,000 --> 00:08:09,000 and stores those entered values as values. 147 00:08:09,000 --> 00:08:13,000 So the entered title for the title key, for the image key, 148 00:08:13,000 --> 00:08:15,000 I store the entered image, 149 00:08:15,000 --> 00:08:19,000 for the address key, let's say we store the entered address. 150 00:08:19,000 --> 00:08:21,000 And for the description key, 151 00:08:21,000 --> 00:08:23,000 we stored the entered description. 152 00:08:24,000 --> 00:08:28,000 And now for the moment, I'll simply lock that meetup data 153 00:08:28,000 --> 00:08:33,000 with console log, soon, we will send it to a server instead. 154 00:08:34,000 --> 00:08:37,000 But for the moment, let's just see if that works. 155 00:08:37,000 --> 00:08:38,000 And hence if I now go back 156 00:08:38,000 --> 00:08:41,000 and open up the dev tools here and reload, 157 00:08:42,000 --> 00:08:46,000 we can enter something here like test. 158 00:08:47,000 --> 00:08:49,000 And then here's some URL. 159 00:08:49,000 --> 00:08:53,000 Let me just grab that dummy image URL 160 00:08:53,000 --> 00:08:57,000 from my dummy meetup data in the old meetups JS file, 161 00:08:57,000 --> 00:09:00,000 and insert data here without quotes, 162 00:09:00,000 --> 00:09:05,000 some test address 512345 test city 163 00:09:07,000 --> 00:09:09,000 and then this is a test. 164 00:09:09,000 --> 00:09:12,000 And if we now click add meetup, 165 00:09:12,000 --> 00:09:14,000 we see this object here on the right, 166 00:09:14,000 --> 00:09:18,000 which is the object with all the entered data. 167 00:09:18,000 --> 00:09:21,000 So submitting the form and handling the submission, 168 00:09:21,000 --> 00:09:23,000 preventing the browser default 169 00:09:23,000 --> 00:09:26,000 and gathering all the user input. 170 00:09:26,000 --> 00:09:28,000 All of that works now. 171 00:09:28,000 --> 00:09:32,000 And that is how we can handle forms with react. 172 00:09:32,000 --> 00:09:33,000 Now of course, 173 00:09:33,000 --> 00:09:36,000 the goal is not to just lock the data here though. 174 00:09:36,000 --> 00:09:39,000 Instead, we now want to send it 175 00:09:39,000 --> 00:09:43,000 to a server which then stores it in a database.