1 00:00:01,000 --> 00:00:06,939 In this video, let's explore what is stateful component. 2 00:00:07,300 --> 00:00:14,830 In the previous video, we talk about the stateless component by creating something like this. 3 00:00:15,220 --> 00:00:18,310 So what is stateful component? 4 00:00:18,790 --> 00:00:29,380 Stateful components have logic and state attached to them, meaning they have their own internal states. 5 00:00:29,710 --> 00:00:35,770 For example, stateful components are typically used for logic and making APIs. 6 00:00:35,830 --> 00:00:40,250 So let's have a look at example of a stateful component. 7 00:00:40,270 --> 00:00:47,620 We get back to how we can make HTTP calls, but for now, let's take to some static data. 8 00:00:48,010 --> 00:00:56,770 So inside the component and the component, part two, let's create one component and call it as stateful. 9 00:00:58,890 --> 00:01:07,590 States for component dot jazz and let's afford the. 10 00:01:08,790 --> 00:01:09,670 Components. 11 00:01:09,690 --> 00:01:11,120 Let's remove that. 12 00:01:11,130 --> 00:01:12,810 And there we go. 13 00:01:12,840 --> 00:01:13,590 As usual. 14 00:01:13,620 --> 00:01:19,440 Let's have some H two and let's call it as stage four. 15 00:01:21,030 --> 00:01:22,110 Component. 16 00:01:24,680 --> 00:01:25,690 Components. 17 00:01:25,700 --> 00:01:26,360 Perfect. 18 00:01:26,360 --> 00:01:28,910 So let's go ahead and then render the component. 19 00:01:28,910 --> 00:01:33,170 So inside the app, let's require the stateful component. 20 00:01:33,290 --> 00:01:34,640 So let me try. 21 00:01:34,640 --> 00:01:42,350 If the auto import is working, yes, the auto import is working and let's render the stateful component 22 00:01:42,350 --> 00:01:45,440 and let's remove the bottom or stateless component. 23 00:01:45,440 --> 00:01:48,710 And now we have state for components. 24 00:01:49,100 --> 00:01:55,700 So stateful component one more time manages their own internal state. 25 00:01:56,210 --> 00:02:01,190 So right now this component is stateless, meaning it has no data. 26 00:02:01,730 --> 00:02:10,310 But as soon as we try to keep some internal state using you state, then this component becomes what 27 00:02:10,400 --> 00:02:11,840 state for component. 28 00:02:12,080 --> 00:02:18,050 Let's say that this component we want to display, let's say, a user profile. 29 00:02:18,050 --> 00:02:23,240 So all we can do is that we can keep track of the user inside our state. 30 00:02:23,720 --> 00:02:27,170 So what we are going to do is that let's bring in the you state hook. 31 00:02:27,470 --> 00:02:38,780 So we need react, import, react from React and then let's structure the you state. 32 00:02:40,440 --> 00:02:43,020 And there we go. 33 00:02:43,290 --> 00:02:44,160 Perfect. 34 00:02:44,370 --> 00:02:50,550 So here, let's have some Internet comments here and let's call it as internal state. 35 00:02:52,500 --> 00:02:59,940 And this internal states, let's bring in our states and they can pass in any valid data structure. 36 00:02:59,970 --> 00:03:03,540 For now, let's use a user data. 37 00:03:03,570 --> 00:03:06,150 So we can say that first name. 38 00:03:07,480 --> 00:03:09,160 Is equal to Joe. 39 00:03:09,670 --> 00:03:15,130 And then last name as you mean that we are getting this data from a server. 40 00:03:15,160 --> 00:03:17,830 Let's go this one as Don. 41 00:03:18,010 --> 00:03:23,200 And then the age of this particular user is 23. 42 00:03:23,860 --> 00:03:24,080 Okay. 43 00:03:24,130 --> 00:03:27,110 So now what we get back is two properties. 44 00:03:27,130 --> 00:03:28,170 Let's get that. 45 00:03:28,210 --> 00:03:31,740 Let's get them into an array as that equal to. 46 00:03:31,750 --> 00:03:39,130 We have the user and then we have what is called the set user in case we want to update a user. 47 00:03:39,640 --> 00:03:45,490 So now this is called the stateful component because it has a state. 48 00:03:45,520 --> 00:03:47,380 We can just maintain a simple state. 49 00:03:47,380 --> 00:03:53,320 Let's say even a single number here is also a state, but I just want to display some data into the 50 00:03:53,320 --> 00:03:54,790 component or the page. 51 00:03:55,150 --> 00:04:04,780 So here we can just use H three and we can see that first name of the user is equal to. 52 00:04:06,430 --> 00:04:11,710 If you console.log the user here, it contains this user. 53 00:04:11,980 --> 00:04:21,070 So let's try to console the user and let's check the terminal and you can see that we have an object 54 00:04:21,070 --> 00:04:24,070 with the initial values. 55 00:04:24,190 --> 00:04:32,200 So here we can inject this user dot first name and then let me call it full name. 56 00:04:32,200 --> 00:04:34,030 Also let's say a full name here. 57 00:04:34,030 --> 00:04:42,100 And after first name we can have space and also inject user dot last name like that. 58 00:04:42,100 --> 00:04:48,400 And then let's have some P tag here and then you can say that your age is equal to. 59 00:04:49,460 --> 00:04:51,470 User does h. 60 00:04:51,500 --> 00:04:55,700 And let's save it and let's collapse this. 61 00:04:55,700 --> 00:04:58,730 And indeed we have the states. 62 00:04:59,420 --> 00:05:05,870 Well, that's pretty simple stateful component as we move on and then we get to how to make it HTTP. 63 00:05:06,050 --> 00:05:09,020 Cause I'm going to make a component more dynamic.