All language subtitles for 015 Introducing State_en

In order to change

what's visible on the screen,

we need to change the state of this app,

so to say.

Now, attached you find an extra article and video

which I created

where I explain what state is.

In the end, you can take it quite literally though.

The current state of this application

is that we have free Todos and this overlay is open.

Now, we would like to also be able to present

another state, where this overlay is closed.

And we want to switch between the states.

When we click on delete, then it should open.

And when we click on cancel

or confirm or the backdrop,

it should close.

So that should be our ways of switching between the states

and React has a built in concept that helps us with that.

And conveniently, it's called State.

For this, let's go to our Todo.js file,

to our Todo component.

Here, we got this delete handler,

this function which is triggered

when the delete button is clicked.

When it is clicked, we would like to switch to the state

where the modal is open.

To make that happen, we need to import some functionality

from the React library.

So we import from React.

Import here.

We have no dot slash

because React is a third party library.

You import from those by just referencing the library name.

And then we import something like this

with curly braces.

We import the useState function.

That is a function exposed by the React library

which we can use in our component functions.

With useState, we register different States,

which we want to support in our React application

and React will react to changes in that state

and allow us as a developer to render different output

depending on which State is active.

Now, that all starts with calling useState

directly in our component function like this.

So not inside of delete handler

instead, directly in the component function.

UseState is a so-called React hook

and those React hooks can only be called directly

in React component functions and in custom hooks

which is a topic will not discuss in this course

but which is discussed in depth in my complete guide as well

For the moment it's enough that we know

that we can use React Hooks in React component functions.

Now, calling useState creates a state React

as a wear ofF.

Now, we can give this state a starting value

by passing it here as an argument to useState.

And that could be false if our state is

that we want to control whether the modal is open or not

and initially, it should not be open.

So the initial state is false.

Now, useState always returns an array

with exactly two elements.

That's how useState works.

It always returns an array with two elements

and we can store it as returned array in a constant

or we use array de-structuring

which is a JavaScript feature to store these two elements,

since we know that it will be always two elements,

indifferent constants

and we could give to first constant a name of showModal

or modalIsOpen open or anything like this.

And the second element here,

the second constant

a name of setModalIsOpen.

Now, why did I choose these names?

Because the first element,

which useState returns in its array

is the current state snapshot.

So this value, which is stored in this state.

You can think of React state as a variable

which is managed for you by React.

You define the initial value here

and you will then also be able to change that value.

Now, you get access to the currently stored value

for this first element here.

The second element

is a function that allows you to change that value

because you don't change it

by assigning a new value to modalIsOpen

instead, you always call this second function

to assign a new value.

Why does this matter?

Because whenever you call this state changing function

React will in the end re-execute

the component function to which this state belongs

and re-evaluate it,

and also update what's rendered on the screen.

This allows you to pick up the latest state value

and possibly render something different

depending on the state.

Notice it might still be a bit abstract.

It will become crystal clear in a couple of seconds.

What we can do now with these two elements

is that in delete handler,

we call setModalIsOpen and set is to true.

To change that modalIsOpen state from false,

which is our initial state, to true.

And then we use modalIsOpen

to conditionally render the modal and backdrop

down there in this JSX code.

So I go to App.js and I remove modal and backdrop from there

and remove the imports

since we're not using modal and backdrop

in this file anymore.

And instead I'll go to Todo.js

and import modal there from ./Modal

and import backdrop here from ./Backdrop.

Constructing the relative paths to these files

as seen from inside this Todo.js file.

And since modal and backdrop are neighbors to this file,

the paths look just like this

and then we can use these components down here.

Let's say here in that div.

Modal and Backdrop.

Now, if we added like this, they would always be rendered.

I only want to render them

if modalIsOpen is true,

If that state has a value of true.

Now, we are changing the state here.

To use it,

we can simply output a dynamic expression down here

and check if modalIsOpen is truth like this

and then write a ternary expression

where if this is true

we render Modal, and that might look strange,

but that is code what you can write

else, we don't output anything.

So we render null.

This certainly looks strange,

but that is how you can render content conditionally

with React and JSX.

In these dynamic expressions

between the curly braces,

you can again use JSX and that's what I'm doing here.

So I'm checking if modalIsOpen is true.

And if it is, I render the modal

otherwise I don't render anything.

And we can actually use a short trick or shortcut here

and use the double ampersand, the logical and operator here

like this

to simply use the fact that in JavaScript

if you use this operator, if both conditions are true

the second value will be returned.

So if that is true and that is true

and a function, a component function will always be true,

then this component function is output here

and that's simply shorter

than writing this ternary expression.

We can now repeat that.

ModalIsOpen check here, for the Backdrop.

And with that, we only output modal and backdrop

if modalIsOpen is true

and not if it's false

and we do this for every Todo component.

So if we saved this file as well now

we don't see the modal right now

but if we click on delete, we see it.

And now we can't interact

with the rest of this page because of this backdrop.

So that's a great step forward.

How can we now get rid of that modal, though?