All language subtitles for 004 Working with State & Events_en

So let's now convert this Users component

to a class-based component.

For this, we again should import something from react.

Let me restructure these imports.

We should import Component from react

because we now build our users component

by creating a class named Users which extends Component.

That's what I explained in the last lecture

and that's how you always build your class-based components.

In there we can now add a render method

and in that render method we return to jsx code

that should be rendered.

So, I'll copy this return statement

and bring it into my render method.

Now we learned that we can access props with these props

but here I'm not working with props

instead, I'm relying on state

and I am pointing at a function

that should be executed when the button is clicked.

Now let's start by adding that function.

In class-based components,

you now don't add a function inside of the render method

though that would technically be possible

but it wouldn't behave correctly.

But instead, since this is a class,

you group together functionality

by grouping it all in that class.

So you would simply add a method

named toggleUsersHandler like this.

There are also alternative ways

of writing a method in classes

but this is the most default and standard way

of defining a method.

Now we have the method, but we don't have the state.

And managing state worked totally different

in the past with class-based components.

With react16.8 hooks were introduced

and we could use to UseState hook

to manage state and functional components.

And it is very simple to manage state then.

Prior to 16.8 class-based components

were the only kind of component that could manage state.

So you always had to write class-based components

when you needed state.

And there you basically needed to do two things,

initialize and define your state,

like we're doing it with UseState when we first call it

and then updated when needed,

like we're doing it here in the toggleUsersHandler.

Now to define state and class-based components,

you would use the constructor.

The constructor function is automatically called

whenever this clause is instantiated

which happens when react encounters,

your class being used as a component.

And then in the constructor, you can do initialization work

like initializing state.

And this would be done by accessing this.state

and setting it equal to an object.

And this is super crucial now.

With class-based components, your state always important,

always is an object.

With functional components, your state can be anything.

It can be just a Boolean, just a string, just a number

but it can also be an object, but it's flexible

it can be anything.

With class-based components, that's not the case.

Here your state always is an object

because with class-based components,

you always group all the state's license and pieces

you might need in a component into one state object.

With functional components

instead if you have multiple state pieces,

you could use multiple UseState calls.

You could also create just one state object

and group it together there

but that is optional with functional components.

And I do talk about that in the state course section.

With class-based components, this is not optional

there you have to group all the state

that makes up a component into one object.

No matter if these state pieces are closely related or not.

So here we would then have our showUsers state

and set this to true initially let's say.

And if we had moreState

then we would simply add this as a extra property.

You can of course also have nestedState,

you could have a nestedObject.

You can have a eraseState that all works

but you have one state object which groups it all together.

Then if you wanna change your state

like in toggleUsersHandler,

you don't do this by accessing this state

and changing it like this, that's not how you do it.

Instead, you call a special method, setState, this.setState,

and this method on this class

is of course also provided by the component class

we are inheriting from.

This setState then also always takes an object.

And this object now contains the new state, you wanna set,

but very important, it won't override the old state

but instead react will behind the scenes

merge the object you're passing here

with your existing state.

So if I had another state here, which I don't need here

if I had that and I then would set showUsers to false,

showUsers would be set to false

but the old state would be capped.

The other state would be capped

because react merges this update with the existing state

it doesn't override the state.

And that's different with useState,

here when you call the state updating function

you always override the old state

with whatever you pass to the updating function,

unless it is a function in which case

we executes that to derive the new state.

But you override the old state,

it's not merged automatically by react

if you would want merging

because you are managing some state object,

you would have to write the logic for this on your own.

With class-based components and setState that's different,

there react mergers this for you.

Now here, of course I don't always wanna set this to false,

I wanna set it to the opposite of what it was before

and therefore here setState

just like the state updating function from useState

also supports such a updating function.

So here we can also pass a function to setState

alternatively to the object with the new state.

And we should do that

if our new state depends on the previous state.

Nonetheless, it's not enough

to just return a new state value like this,

because here I would be returning something invalid

because our state is an object.

Instead here, we have to change this a little bit

and return a new object

just as you have to pass our object to set state

if you use that function form

you have to return an object.

And there, I said showUsers to curState.showUsers

and invert that.

And again, what we return here will be merged

with the old state.

So this second state piece here will not be lost.

And that's how we update state.

Now to use it, we go down to the render method

where I need my state

and here we can now access this.state.showUsers

to access this state object

and then the showUsers property,

which we set up here and which we manage and update here.

And we do it as in all the places where we need that state.

Now of course, I also wanted to arrive to users list,

therefore I'll grab this constant here

and add to this to my render method

because we still can of course define help

or consents like this in the render method,

that all is valid and works.

One thing, one last thing is missing though

and that's this method here.

I added the toggleUserHandler method,

but you don't call it by using it like this.

Instead, it's a method off this clause here

and therefore we need to point at this toggleUserHandler

to point at this method part of this class.

But even that wouldn't work

due to how this works in JavaScript.

And that has nothing to do with react

that this keyword can simply be tricky in JavaScript.

Attached you find a resource

which allows you to learn more about this.

What you need to do in the end is you need to make sure

that this keyword inside of your method

refers to the surrounding class

and it wouldn't by default,

when your method is called upon any event like to click.

So to fix this, we can for example use bind and bind this

which simply means that this keyword

inside of this method here

is now set to have the same context or the same value

as this keyword when this code is evaluated

and here that this keyword will refer to this class.

Again, this is just related to how JavaScript works.

It is not required in the functional component world

because there we just define a function

right before we point at it.

There we don't use that this keyword at all

because we're not working inside of a class.

With that, we can again remove

the functional component or a commented out

and then save everything.

And now if I reload, we get an error,

Must call super constructor in derived class,

that is indeed true.

When you add the constructor to your class

and you extend another class, you need to call super

which calls the constructer of the super class

so if the class were inheriting from.

And with that, if we reload this works

and it works as before now with class components only.

So as you can tell,

it's simply a different way of writing your components.

Of course, now we can also get rid of the useState import

because we're not using it anymore

and as mentioned before already,

you also can't use it in your class based components.

None of the react hooks can be used there.