1 00:00:01,110 --> 00:00:03,300 ‫Let me now show you a quick example 2 00:00:03,300 --> 00:00:05,730 ‫of child to parent communication 3 00:00:05,730 --> 00:00:09,450 ‫which is a very important thing in React development, 4 00:00:09,450 --> 00:00:10,710 ‫and it works, basically, 5 00:00:10,710 --> 00:00:14,103 ‫exactly the same in class-based React. 6 00:00:15,660 --> 00:00:17,250 ‫So what I want to do now, 7 00:00:17,250 --> 00:00:20,640 ‫is to quickly extract this input right here 8 00:00:20,640 --> 00:00:22,860 ‫into its own component. 9 00:00:22,860 --> 00:00:25,743 ‫So let's actually grab all of this here. 10 00:00:27,450 --> 00:00:30,960 ‫And then, let's create a new class here. 11 00:00:30,960 --> 00:00:34,023 ‫So a new component, just called input, 12 00:00:35,100 --> 00:00:38,613 ‫which extends React.Component. 13 00:00:40,320 --> 00:00:43,000 ‫And then, the render method 14 00:00:44,610 --> 00:00:49,610 ‫from which we simply return what we just cut there. 15 00:00:50,250 --> 00:00:53,040 ‫And then, let's come back here 16 00:00:53,040 --> 00:00:57,363 ‫and simply include that input. 17 00:00:58,560 --> 00:00:59,460 ‫All right . 18 00:00:59,460 --> 00:01:02,610 ‫But of course, then we get some errors 19 00:01:02,610 --> 00:01:05,160 ‫because this input here depends 20 00:01:05,160 --> 00:01:08,370 ‫on some state and on updating state 21 00:01:08,370 --> 00:01:13,020 ‫which is not living anymore in this current component. 22 00:01:13,020 --> 00:01:15,390 ‫So the location state, of course, 23 00:01:15,390 --> 00:01:18,210 ‫needs to stay in the app component 24 00:01:18,210 --> 00:01:21,513 ‫because we need it here in this other method. 25 00:01:22,350 --> 00:01:25,353 ‫So here in this fetchWeather event handler. 26 00:01:27,870 --> 00:01:30,480 ‫So we need to do what we always do, 27 00:01:30,480 --> 00:01:35,480 ‫which is to pass in these things as props. 28 00:01:35,550 --> 00:01:37,830 ‫So this data of location. 29 00:01:37,830 --> 00:01:42,830 ‫And so let's add this.state.location. 30 00:01:43,950 --> 00:01:47,310 ‫And then here, we receive that as props. 31 00:01:47,310 --> 00:01:50,880 ‫So now it's no longer this.state.location 32 00:01:50,880 --> 00:01:54,603 ‫but this.props.location. 33 00:01:55,830 --> 00:01:57,750 ‫And so if I give it a safe now, 34 00:01:57,750 --> 00:02:00,450 ‫then we are back to working here. 35 00:02:00,450 --> 00:02:04,080 ‫However, this state will of course still not update 36 00:02:04,080 --> 00:02:05,730 ‫because the state, again, 37 00:02:05,730 --> 00:02:08,370 ‫still lives in that other component. 38 00:02:08,370 --> 00:02:09,930 ‫So in the app component. 39 00:02:09,930 --> 00:02:13,020 ‫And so this is where child to parent communication 40 00:02:13,020 --> 00:02:15,090 ‫comes into play again. 41 00:02:15,090 --> 00:02:17,760 ‫So remember that that basically means 42 00:02:17,760 --> 00:02:20,850 ‫that a child component needs to update the state 43 00:02:20,850 --> 00:02:22,530 ‫in a parent component. 44 00:02:22,530 --> 00:02:23,790 ‫And the way we do that, 45 00:02:23,790 --> 00:02:27,420 ‫is to simply pass down the state updating function 46 00:02:27,420 --> 00:02:29,193 ‫into the child component. 47 00:02:30,390 --> 00:02:35,390 ‫So basically, we need now this and pass it as a prop. 48 00:02:37,080 --> 00:02:41,220 ‫So let's grab that, and actually let's create 49 00:02:41,220 --> 00:02:43,353 ‫a brand new event handler function here, 50 00:02:44,490 --> 00:02:47,370 ‫and we will do it just like this other one. 51 00:02:47,370 --> 00:02:49,920 ‫So just like we did in the previous lecture 52 00:02:49,920 --> 00:02:51,303 ‫as a class field. 53 00:02:52,380 --> 00:02:54,583 ‫So let's call this one setlocation, 54 00:02:57,270 --> 00:02:59,793 ‫and then this one needs to receive the event. 55 00:03:01,380 --> 00:03:04,743 ‫And actually it's just copy paste at this point. 56 00:03:06,390 --> 00:03:08,400 ‫So let's remove that. 57 00:03:08,400 --> 00:03:12,030 ‫And so with this, we created ourselves the event handler. 58 00:03:12,030 --> 00:03:16,800 ‫And so now all we have to do, is to pass that in also here. 59 00:03:16,800 --> 00:03:20,590 ‫So let's call that prop maybe onChangeLocation, 60 00:03:27,510 --> 00:03:31,470 ‫and then the set location function. 61 00:03:31,470 --> 00:03:34,620 ‫So actually this.setLocation. 62 00:03:34,620 --> 00:03:36,960 ‫So we have so many "this" here, 63 00:03:36,960 --> 00:03:38,973 ‫it's getting a bit confusing indeed. 64 00:03:40,440 --> 00:03:43,800 ‫So on unchanged location, let's just copy that. 65 00:03:43,800 --> 00:03:48,800 ‫And so now, again, this.props.onChangeLocation. 66 00:03:51,000 --> 00:03:53,190 ‫And so, now we are back 67 00:03:53,190 --> 00:03:56,220 ‫to being able to change the input here. 68 00:03:56,220 --> 00:04:00,930 ‫But now we are doing it using child to parent communication. 69 00:04:00,930 --> 00:04:03,810 ‫So this technique is just as important 70 00:04:03,810 --> 00:04:08,810 ‫in class-based React as in function component-based React. 71 00:04:09,180 --> 00:04:11,610 ‫So the whole thinking in React part 72 00:04:11,610 --> 00:04:14,520 ‫is actually exactly the same in class 73 00:04:14,520 --> 00:04:16,413 ‫and in function components.