In this video, let's explore what is stateful component.
In the previous video, we talk about the stateless component by creating something like this.
So what is stateful component?
Stateful components have logic and state attached to them, meaning they have their own internal states.
For example, stateful components are typically used for logic and making APIs.
So let's have a look at example of a stateful component.
We get back to how we can make HTTP calls, but for now, let's take to some static data.
So inside the component and the component, part two, let's create one component and call it as stateful.
States for component dot jazz and let's afford the.
Components.
Let's remove that.
And there we go.
As usual.
Let's have some H two and let's call it as stage four.
Component.
Components.
Perfect.
So let's go ahead and then render the component.
So inside the app, let's require the stateful component.
So let me try.
If the auto import is working, yes, the auto import is working and let's render the stateful component
and let's remove the bottom or stateless component.
And now we have state for components.
So stateful component one more time manages their own internal state.
So right now this component is stateless, meaning it has no data.
But as soon as we try to keep some internal state using you state, then this component becomes what
state for component.
Let's say that this component we want to display, let's say, a user profile.
So all we can do is that we can keep track of the user inside our state.
So what we are going to do is that let's bring in the you state hook.
So we need react, import, react from React and then let's structure the you state.
And there we go.
Perfect.
So here, let's have some Internet comments here and let's call it as internal state.
And this internal states, let's bring in our states and they can pass in any valid data structure.
For now, let's use a user data.
So we can say that first name.
Is equal to Joe.
And then last name as you mean that we are getting this data from a server.
Let's go this one as Don.
And then the age of this particular user is 23.
Okay.
So now what we get back is two properties.
Let's get that.
Let's get them into an array as that equal to.
We have the user and then we have what is called the set user in case we want to update a user.
So now this is called the stateful component because it has a state.
We can just maintain a simple state.
Let's say even a single number here is also a state, but I just want to display some data into the
component or the page.
So here we can just use H three and we can see that first name of the user is equal to.
If you console.log the user here, it contains this user.
So let's try to console the user and let's check the terminal and you can see that we have an object
with the initial values.
So here we can inject this user dot first name and then let me call it full name.
Also let's say a full name here.
And after first name we can have space and also inject user dot last name like that.
And then let's have some P tag here and then you can say that your age is equal to.
User does h.
And let's save it and let's collapse this.
And indeed we have the states.
Well, that's pretty simple stateful component as we move on and then we get to how to make it HTTP.
Cause I'm going to make a component more dynamic.