1 00:00:02,000 --> 00:00:05,000 At this point, we already learned a lot 2 00:00:05,000 --> 00:00:07,000 about some important React features, 3 00:00:07,000 --> 00:00:08,000 but we're not done yet. 4 00:00:08,000 --> 00:00:11,000 Instead, it's now time to dive deeper into React 5 00:00:11,000 --> 00:00:14,000 and learn about another super important React concept, 6 00:00:14,000 --> 00:00:18,000 maybe the most important React concept 7 00:00:18,000 --> 00:00:20,000 after components and props, 8 00:00:20,000 --> 00:00:22,000 and that would be state. 9 00:00:22,000 --> 00:00:23,000 Now, what's state about? 10 00:00:24,000 --> 00:00:27,000 Well, let's say that in our component 11 00:00:27,000 --> 00:00:29,000 we now wanna add a new post component 12 00:00:29,000 --> 00:00:31,000 which simply displays a form 13 00:00:31,000 --> 00:00:33,000 where we can enter the text 14 00:00:33,000 --> 00:00:37,000 and the author name of a new post that should be added. 15 00:00:37,000 --> 00:00:40,000 And, ultimately, in the application, 16 00:00:40,000 --> 00:00:41,000 the website we're building, 17 00:00:41,000 --> 00:00:45,000 we wanna be able to bring up that modal overlay, 18 00:00:45,000 --> 00:00:49,000 that form which does allow us to add new posts. 19 00:00:49,000 --> 00:00:52,000 Now, at the moment, we're not there yet. 20 00:00:52,000 --> 00:00:54,000 Instead, we'll just render such a form. 21 00:00:54,000 --> 00:00:57,000 And, as we type into this text area 22 00:00:57,000 --> 00:00:58,000 or this input, 23 00:00:58,000 --> 00:01:03,000 I wanna update the text that's shown in my first post here, 24 00:01:03,000 --> 00:01:06,000 as a temporary step into the right direction, 25 00:01:06,000 --> 00:01:09,000 before we then later can really use that form 26 00:01:09,000 --> 00:01:12,000 to add new posts to this list of posts. 27 00:01:12,000 --> 00:01:13,000 Now, for that attached, 28 00:01:13,000 --> 00:01:16,000 you find a link to this new post .JSX file 29 00:01:16,000 --> 00:01:20,000 and the new post .module.css file, 30 00:01:20,000 --> 00:01:24,000 and you should add both files into your component's folder. 31 00:01:24,000 --> 00:01:26,000 And, this new post component, 32 00:01:26,000 --> 00:01:29,000 which basically looks like the other components 33 00:01:29,000 --> 00:01:30,000 we built thus far, 34 00:01:30,000 --> 00:01:33,000 it's a function that returns some JSX code, 35 00:01:33,000 --> 00:01:36,000 in this case some form markup, 36 00:01:36,000 --> 00:01:39,000 but only using standard HTML elements. 37 00:01:39,000 --> 00:01:41,000 This component should now be used 38 00:01:42,000 --> 00:01:44,000 next to our list of posts here. 39 00:01:45,000 --> 00:01:47,000 So, here, maybe above that list, 40 00:01:47,000 --> 00:01:50,000 I wanna use this new post component. 41 00:01:51,000 --> 00:01:54,000 But, for that, we gotta do two things. 42 00:01:55,000 --> 00:01:59,000 We have to import new post from ./newpost, 43 00:01:59,000 --> 00:02:03,000 so that we make this component available in that file. 44 00:02:03,000 --> 00:02:06,000 And, since you learned that sibling elements 45 00:02:06,000 --> 00:02:08,000 are not allowed 46 00:02:08,000 --> 00:02:09,000 and, at the moment, 47 00:02:09,000 --> 00:02:12,000 new post would be a sibling to the unordered list, 48 00:02:12,000 --> 00:02:15,000 we have to add this empty element, 49 00:02:15,000 --> 00:02:18,000 this fragment, as it's called, 50 00:02:18,000 --> 00:02:21,000 as a wrapper around new post and unordered list, 51 00:02:21,000 --> 00:02:26,000 so that we fulfill that requirement React has 52 00:02:26,000 --> 00:02:27,000 that in our JSX code 53 00:02:27,000 --> 00:02:31,000 in the place where we return or store the JSX code, 54 00:02:31,000 --> 00:02:34,000 we have only one root element. 55 00:02:36,000 --> 00:02:39,000 By the way, as a side note inside of new post, 56 00:02:39,000 --> 00:02:41,000 you will see that on the label 57 00:02:41,000 --> 00:02:43,000 I have this HTML for attribute, 58 00:02:43,000 --> 00:02:47,000 and here we have a similar case to class name. 59 00:02:47,000 --> 00:02:50,000 It would normally be the for attribute, 60 00:02:50,000 --> 00:02:52,000 but this is not allowed in JSX code, 61 00:02:52,000 --> 00:02:55,000 and therefore here it's HTML for. 62 00:02:55,000 --> 00:02:58,000 And, the good news are that with class name 63 00:02:58,000 --> 00:02:59,000 and HTML for, 64 00:02:59,000 --> 00:03:02,000 you now basically know all important deviations 65 00:03:02,000 --> 00:03:05,000 from the standard attribute names 66 00:03:05,000 --> 00:03:07,000 that you typically use all the time. 67 00:03:08,000 --> 00:03:12,000 But, with that, we got this new post component output there 68 00:03:12,000 --> 00:03:13,000 and, if you save all files, 69 00:03:13,000 --> 00:03:16,000 you should see something like this on the screen, 70 00:03:16,000 --> 00:03:19,000 this form above this list of posts. 71 00:03:19,000 --> 00:03:24,000 And, my goal now is that as I type something here, 72 00:03:24,000 --> 00:03:27,000 I update this text down there. 73 00:03:27,000 --> 00:03:30,000 So, in the end, this text should go down there 74 00:03:30,000 --> 00:03:33,000 and, if I type a name here, 75 00:03:33,000 --> 00:03:34,000 that name should in the end, 76 00:03:34,000 --> 00:03:36,000 go down there. 77 00:03:37,000 --> 00:03:39,000 And, at the moment, that's of course not happening, 78 00:03:39,000 --> 00:03:42,000 but that's where this new state concept 79 00:03:42,000 --> 00:03:43,000 and feature can help us.