format this text in html.   welcome to the next section in this one

we will keep exploring fundamental react

topics and finally make our components

do something so we will make components

interactive now

so to do that we will start learning how

to handle events in react and how to

update the user interface using the

extremely important concept of State

we'll also start building our next

project where we're gonna focus on State

and on building forms in the react way

using controlled elements

by the end of the section we'll

summarize everything we have learned

about props and state both in theory and

in practice by building a really nice

small flashcards application

so once again a super essential and

foundational section for you and so

so in this section we will start to

learn about events and states by

building a very simple components where

we can navigate through a few steps and

so let's now in this lecture start by

building out the static part of that

component

now in order to build that component we

will actually create a brand new project

using Create react app

so if you're on Windows go ahead and

open up your command prompt and if

you're on a Mac then just open your

terminal

and remember that in the terminal you're

always in a folder so you can see what

folder that is here in your command

prompt and then from there just navigate

to the folder where you want to create

your new projects and for me that is

again the desktop

so remember that you can see all the

folders that you can navigate to from

here so I am here in this home folder

basically and so I can navigate to any

one of these

and so that's what I'm going to do with

CD

and just by the way again on Windows

that's the IR instead of LS

but anyway I will now navigate to the

desktop and so now here let's create our

new project so that's npx

create Dash react Dash app and now here

remember to log in the version number

five

just so we are all building the same

thing here so using the same versions

and then I will simply name this project

here steps

so then hit enter and then create react

app is doing its thing and in the

meantime let's actually check out the

component that we are going to build

so that's this one right here

so it's basically this component where

we have these three steps and as I said

in the beginning we can basically

navigate through them by clicking here

on these buttons so when we click next

we go to step number two

and so then we get applied to jobs

so first we had learn react then apply

to jobs and then invest all your new

income

so we can click this buttons here so we

have some interactivity here and we can

then also close and open up DS component

again

all right so again in this lecture we

will start by building out the static

part of this component so just the

component basically without any

interactivity so just writing the jsx

but anyway create react app has now

finished

I will just quickly again rename the

folder here

and then let's drag and drop it here

onto vs code and as always you can also

open it

right here

okay so let's clean up our starter files

a little bit

and in fact I will delete almost

everything here

so we will just leave app.js and

index.js

so all of them can go to the trash and

now let's open up index.js

now this time we will actually not write

all of this here again by hand because

now you already know how that works and

so we can basically keep the code here

that create react app put there for us

we just need to get rid of this part

and also of this import

now we also got rid of the index.css

file so this import right now doesn't

work but I do actually have a CSS file

in these starter files

so let's

uh open up the files that we downloaded

in the beginning then here in the steps

starter files we have these two

and then in steps let's place them here

in the source

and then let's also just move this

vanilla.html into the public

so we're going to check out later

what that is

okay

then going back here notice how we are

importing this app from this file app.js

and so that's this one

but here let's clean everything and

let's once again start from scratch by

creating a new component and as always

that component will be the app component

so function

app and so you see that usually we use a

component called app as the root

component of our application so

basically as the component that is the

parent component of all the other

components

hello react and finally all we have to

do is to export this function from here

so export

default so that now index.js can import

it here and render it into the Dom

so just again like we wrote before by

hand but now we will just leave the code

here of course we don't always have to

do everything manually

now let's come here to our integrated vs

code terminal so just by clicking here

and as you see this is already

automatically in our project folder or

at least it should be so now there's no

need to navigate anywhere all we need to

do to start a project

is to run npm

start

so this will then automatically open up

a new browser tab

and yeah here it is

so this is the content of or app.js

all right just giving ourselves a bit

more space here

and so you notice that the file name

here app.js is exactly the name of the

component and so this is going to be a

pattern that we will see throughout the

course

but anyway let's not together write the

jsx here so that we end up with

something like this again just without

the interactivity

so we actually start with a div that has

the class name of steps

and if you're interested in the CSS then

of course make sure to check out the CSS

file that we just included

and now this diff here has three child

elements

so it has a div

and so here we will have

these numbers one two three

and now to make this a bit faster our

just duplicate the code here which as I

explained to you before we can simply do

with

this command here so copy line down I

think I actually personalized this

Command right here so for you it is

probably another one but you should see

which one it is right here and if you

want you can also personalize all your

shortcuts right here

foreign

but anyway let's now move on to the next

one and here we actually want a

paragraph

so a paragraph with the class name of

message

let's just use a placeholder for now

and then finally a div again

so here we then will have one button

element

let's see

and then another one which says

next so here basically we have the

numbers then the message enter buttons

and so what we have here is already

looking pretty close to that

now the buttons here are not purple like

in the demo and that's because we will

later have another button which should

not have that background color and so

let's add those stylings here directly

to the two buttons and so with this we

can then also practice again how we add

styles to some individual jsx elements

so remember that we do that by passing

in basically the style prop into this

so then we enter JavaScript mode and

then here we can Define our object of

styles

and here the color is

7950f2

and also the text color let's set it to

White which is FFF and it needs to be a

string of course since again this is

just a JavaScript object

now in case you're wondering why these

colors are so nicely highlighted that's

simply because I have this extension

called color highlight so a very popular

one with 5 million installs and so

if you want to replicate the way this

looks

then you can just also install it

but here let's just copy all of this

next

and yeah that's looking pretty close all

we are missing now is the Highlight here

of the current step so here we are in

Step number one and therefore it is now

highlighted with this purple color

and for that we have yet another class

name

so class of

active

now finally let's also add the message

here and those messages are actually in

the CSS file that I provided for you

So I placed this JavaScript object here

and so let's paste that out here outside

of the component

so this data doesn't depend on anything

that is inside the component and so it

should be located outside because

otherwise each time that this function

here is executed this data so this array

will be created again

but we will learn all about that a bit

later of course so when objects are

created and when these functions are

executed and so on so right now we are

only learning really how we use these

react features but not yet how they work

behind the scenes so the mechanics of

react are still a bit hidden to us we

are only just learning how we use the

different features

right

so now we need this message here

basically so the first element of the

array right here but we're not going to

just copy it right so we want to read it

dynamically and so let's hear inside

this component Define a variable which

will tell us which step we are currently

in

so let's do const

step and let's just set it to one and by

the way it is this step here that we

will want to update later as we click on

these buttons but for now we are just

building here the static part so we are

just manually setting it to 1.

so then let's write step

and then let's read the value out of the

array

so that's messages add position step

and we need a minus one here because of

course the array is zero based

all right ah beautiful

so if we now manually change it here to

2

then that will then change the message

here but what didn't change is that this

step number two was not marked as active

so basically we need to Now set the

Styles here on these elements

conditionally

so if we just add the class name active

to all of them then they would always be

active but that's not what we want

so we need to basically determine this

string here based on a condition so just

like we learned in the previous section

so let's enter JavaScript mode so that

we can write a template literal and so

here we will then produce either active

or nothing

so let's enter the JavaScript mode

basically of the template literal and

then let's just ask if the step is

greater or equal one and if so

then the result of the operation should

be the string of active and if not

so you see that this one here already

became purple and so that's of course

all right but let's add this

but then here of course we need to adapt

and yeah

nice that's working so if we had number

three

then all three of them would become

all right and let's just quickly check

this out

so you see now this one has the class of

active and these ones still have the

class attribute because we specified it

here but then there is no string to it

so that's basically just this empty

string that we return in these two cases

great so that's the static part of the

application but of course we want to Now

navigate here by clicking on these

buttons so not changing manually here

this step variable

right and so that means that it's now

time to learn how we can handle the

click events on these buttons and so

that's what the next lecture is going to

events in react is actually pretty

straightforward and so let's now learn

how it's done

so as you can imagine we are not going

to use the add event listener method

here because that is the imperative way

of building uis but here in react we use

a more declarative approach so we do not

manually select Dom elements and so

therefore we do also not use add event

listener instead we use something

similar to the HTML inline event

listener so instead in react we do

something very similar to the HTML

inline event listener so basically we

will directly listen for the event right

on the element where they will happen

so right here on the button for example

we can use the on click prop and then we

simply specify a function here

so the click is the event name and then

we always prefix it with the on and then

we need to write it in camel case while

in inline HTML

we would write it like this

so like this and then specifying a

string so no camel case but this is not

HTML it is jsx and so it's slightly

different just as we learned before in

the lecture about the rules on jsx

so again we will pass in here now a

function and that function will then be

executed Whenever there is a click

happening on this Dom element so in this

case on this button right here

so let's create a quick Arrow function

here and all I'm going to do now is to

alert

something

let's say previous

and this should already be working

so if I click here now

then yes we get the alert that is saying

previous

and we can do the same thing on the

and here we say next

and so of course then here we will get a

and that's essentially it so this is how

we handle events the react way no ad

event listeners but instead we specify

an event listener function directly on

the element using in this case the on

click prop but it could be any other

event as well so we can specify another

event handler

so let's use the on Mouse

enter

and so now here again we need to specify

a function and it's really really

important to understand that it is not a

function call but really a function

so we cannot simply write

test for example because what what

happens now as I save

so you see immediately we got this test

right here and not when I hover over the

button so why is that

well basically as soon as react

initializes this component so when it

first calls this app function it will

then see this code and so here we are

calling alert and so then that's exactly

what it does react will read this code

and then here it finds this function

call and so it will immediately call

this function

but again that's not what we want we

want to basically Define a callback

function which will be called at a later

time and that later time is in this case

when the mouse enters this element

so you see that now nothing happened but

as soon as the mouse hovers here then

this function is called

so this function is called and then we

get our alert so again very very

important do not call a function here

but really specify a function value

somehow we got that again here

but never mind so this was just a test

anyway let's get rid of this this was

just to show you that we can listen of

course to more than just the click event

now usually we do not directly Define

the event handler function right here in

the on click prop but instead we create

a separate function and then pass that

function in here

so let's do that now and so usually we

create those event handler functions

right here in the component

so that's something new that we haven't

done before but that's perfectly fine we

can Define any functions that we want

here right inside the component body

and let's call this one handle

and this handle part here in the event

handler function is pretty standard in

react development so you will see this

all the time and so then you know

immediately that this function is an

event handler function that is probably

being used somewhere in the jsx of that

component in this case it's going to be

used right here

so handle previous and what we want to

do here

is just to alert previous

so if we click here now that's going to

work still

great and once again really really

important to notice that here we are

just passing in the function value so we

are not calling it because if we were

calling it then again we would

immediately see that previous so react

would then immediately run this code

all right

but like this we are only passing in the

function or of course we could also do

this

but of course that's very redundant

so now we are back to just having a

function here right it's just a function

that calls another one so that's not

very effective

but sometimes we will have to do

something similar

but for now this is the way that makes

sense and so let's Now quickly

create another one

so again this is usually the way we do

it

so creating a function which starts with

handle

and then we simply pass that function

here into the on click prop or any other

prop

that we can use to handle some other

event

all right just to make sure that it

works and indeed it does

great so this is how we handle events

typically in react but of course now we

actually want something meaningful to

happen here and in particular we want to

basically change this step value here

right and for that we need something

called State now we have touched on

state many times already but now it's

time to really learn what state is and

so we learned how to use event handlers

but now we want them to actually do

something useful right so we want to

make the component interactive and for

that as I have mentioned already we need

state

now without a doubt state is the most

important Concept in react

so everything basically revolves around

state in react and so we will keep

learning about State throughout the

entire course

therefore let's start with an overview

of what exactly you will learn about

State while going through this course

first we will learn what state actually

is what it does and why we need it which

is what this section is all about

then we need to learn how to actually

use state in practice using the EU state

or use reducer hooks the context API or

even external tools like Redux

we will also need to deeply understand

how to think about state in react and so

these are topics for future sections

okay and with this out of the way we're

now ready to learn what state actually

is

so we have learned how to pass data into

a component by using props which

remember is data that's coming from

outside the component but what if a

component needs to actually hold its own

data and also hold it over time

also what if we actually want to make

our app interactive changing the UI as a

result of an action

well that's where finally State comes

into play

so state is basically data that a

component can hold over time and we use

it for information that a component

needs to remember throughout its life

cycle

therefore we can think of State as being

the memory of a component so that can be

quite a helpful analogy I think

now examples of State can be simple

things like a notification count the

text content of an input field or the

active Tab in a tab component it can

also be a bit more complex data for

example the content of a shopping cart

now what all these pieces of State have

in common is that in the application the

user can easily change these values for

example when they read a notification

the count will go down by one or when

they click on another tab that tab will

become active and therefore each of

these components needs to be able to

hold this data over time so over the

life cycle of the application and for

that reason each of these pieces of

information is a piece of State

and notice how I use the term piece of

State here because just the term State

itself is more of a general term so a

piece of state or a state variable is

just one single actual variable in the

component that we can Define in our code

on the other hand the term State itself

is more about the entire state that the

component is in like the entire

condition at a certain point in time

so basically the general term state is

all the pieces of State together

and if this sounds confusing don't worry

these are just some minor differences in

terminology in practice we usually use

the terms State piece of State and State

variable quite interchangeably

but anyway let's now move on to the most

important aspect of state which is the

fact that updating State triggers react

to re-render the component

so again whenever we update a piece of

State in a component this will make

react re-render that component in the

user interface so it will create a new

updated view for that component and a

component's view is basically just the

component visually rendered on the

screen so in the user interface

now up until this point I have always

just used the generic term user

interface but now we are actually

talking about a single component and

when one single component is rendered we

call that a view and so all the views

combined together then make up the final

user interface

now do you remember this small diagram

that we saw right at the beginning of

the course when we first talked about

how react automatically keeps data in

sync with the UI

well state is how react does that so

state is how react keeps the user

interface in sync with data we change

the state we change the UI

so summarizing state allows developers

to do two important things first state

allows us to update the components view

by re-rendering the component so it

gives us a way to change part of the UI

second state allows developers to

persist local variables between multiple

renders and re-renders

so if you think about this state is

basically a tool and in fact it's the

most powerful tool that we have in the

world of react

so understanding how a state works and

what it does so understanding the

mechanics of states will unlock the

power of react development for you

but before we go understand the

mechanics of State let's actually first

go back to our code and use this

powerful tool in practice for the first

time

so now that we know what state is let's

try to implement it in our small project

and just as a quick reminder what we

want to happen is that when we click

this next and this previous button we

basically want the step to change

so the step here is currently set to 1

but we want this step variable basically

to be dynamic and so for that we now

need to add a new piece of state to our

so let's get rid of this and add that

new piece of State

so in order to use state in practice in

a component we do it in three steps

first we add a new state variable then

we use it in a code and usually in jsx

and third we then update the piece of

State in some event handler and so let's

start with the first step which is to

actually create the state variable and

we do so using the use State function

that react provides to us

so that's use

and if now I hit enter on my keyboard as

this use State here is selected in the

vs code autocomplete

the S code will automatically import the

use date function from react so this

line of code right here

now if for some reason that didn't

happen in your code editor then make

sure that you import the use date

function from react in that way

so the use date function is a function

and so it takes an argument and the

argument that we need to specify here is

the default value of this state variable

so that's in our case step number one

now this yield State function here will

actually let's just call it array for

now

and then log it to the console

so just so you see

and so yeah now step is no longer

defined let's just put that back for a

minute step equals one

so this is the array and so you see it

has two values here so this first value

so this number one is the default value

that we want for our state so this one

here and then the second one is a

function that we can use to update or

state variable

so what we usually do is to then

immediately Destructor this array right

here

so first we have step

which again is this first right here

and so this will be our state variable

itself and then second again we have the

function and so this one we usually call

set

and then the name of the state variable

so set step in this case

now we can get rid of this

and if we now reload we see that our app

is already using that piece of state so

that step variable because this is

exactly the variable name that we had

before

so we are already using the step in our

jsx here and here and also here for this

class name

okay so we have completed the first step

of defining the state variable using the

U State function and the second step in

which we use the state variable so this

step piece of State in our code and so

now the third step is to actually update

the state in an event handler

so let's get rid of this alert which was

just a placeholder

or actually let's start with this one so

with the next one

so now it's time to use this set step

function here

so

we use setstep to update the step State

variable and so what do we want the step

to be

well basically just the current step

plus one

right so when we click the next button

the step should go one up and so that's

the current step plus one and so now we

are ready to test this

so let's see

and yeah that works

so our component is now Dynamic and so

congratulations you just unlocked the

power of state and the power of react

so what happened here as we clicked on

this button was that the handle next

event handler function was called and

this event handler then updated the step

State and so then react automatically

rendered this new component view for us

so that's just amazing

now let's go back here and Implement

also the handle previous function and

here we basically want the opposite so

set step

and then step minus 1.

so let's see and yeah that works

however right now we have a small bug in

our app because watch what happens when

I keep clicking here

so you see step 0 and step minus 1 and

so on and the same here so if I keep

going then of course we have no more

elements in our array to show

so the array only has three elements and

so step five

or anything below step 0 doesn't make

any sense and so here in the Handler

function we can simply add a condition

in order to prevent that so let's just

say if the step

is greater than one

only then set this step and then here

something similar so if the step is less

than 3.

so let's see let's reload this and so

if I click next

so right now the step is three so this

one here is no longer true and so now

then this part should not be executed

and indeed

that works so we fixed that small bug

and now our component is working just as

we want it

great

now just a few more things about the

creation of the state variable here

so first of all this use date function

here is what we call a hook in react and

we can identify hooks because they start

with this use keyword here so all the

react functions that start with use like

this for example use effect or use

reducer and of course this use state are

react Hooks and we will learn in detail

what a react Hook is a bit later but for

now what you need to know is that we can

only call hooks like use State on the

top level of the function so of this

component function right here so only

here is it allowed to call you state not

inside an if statement or inside another

function or inside a loop so for example

we could not do this so immediately

react would then tell us that the U

State Hook was called in a function that

is not a react function component

so we can only do that right here

so also not in an if statement

then let's see and again you see

immediately that we get this error

saying that the U state was called

conditionally and before it actually

gets to this dramatic error here we can

even see in this overlay in vs code that

react took was called conditionally and

this one here is coming from eslint by

the way and that's why it was so

important to set up yeslind in the

beginning

okay but anyway let's remove all of this

and now the other important thing about

state is that we should really only

update State using this Setter function

right here so not manually now just to

finish I just noticed that here we

actually don't need this when we use our

step here

so there is no need

for a template literal here because here

we are not really creating a new string

we are just basically outputting a new

string based here on this ternary

operator

but anyway we now have this nice Dynamic

component all without the imperative Dom

manipulations that we need in vanilla

JavaScript

by the end of the last lecture I said

that we should only update State using

the setter function but don't just trust

me on that so instead let's actually

explore this and break react so just to

see what happens when we try to update

State manually

now right now we have this step State

here defined as a const variable and so

we would not be able to even change it

so let's change this to a let

and so then we can actually break this

so let's say the tier in handle next

instead of updating the state in the

so step equal

step plus one

that would be a perfectly normal way of

updating a variable defined with let

right and so right now this is a let

variable so a variable that we can

update and so again this would be a

perfectly normal way of updating

variables in JavaScript but let's see

what now happens when we click this

button

well simply nothing happens so we don't

get any error from react but simply

nothing happens and so the reason for

that is that react has no way of knowing

that this is actually trying to update

the state

so react has no magic way of knowing

that this year is the state variable and

that this operation is basically

updating it so again react doesn't know

about that and that's why react provided

us with this Setter function here which

is a functional way of updating the

state value but without mutating it

because here we are directly mutating

now this step variable right but react

is all about immutability and so

therefore we can only update the state

using the tools that react gives us so

in this case this set step function and

so this Setter function is actually tied

to this state variable right here so

when we use this functional way of

updating the state then react does know

that this is the state variable that

okay so never do this mistake just

always use const and always use the

now another way in which this could

happen which might be a little bit less

obvious is when we use an object or an

array for state

so let's just do a quick experiment here

so let's just say

test for example

and then use State and here as a default

we pass in an object

and let's give it some property of name

now notice that here in the

destructuring I only took out the state

variable itself so I don't even have the

setter function now and so here let's

say that I wanted to update this name

well let's first actually also print it

so test

dot name

so then we get Jonas there

and then here we might think that this

is how we update

that state

so test.name and now let's use thread

for example

so just some other name and yeah watch

what happens when I click next now

and that did actually work so mutating

the object like this did actually

trigger a new re-render of the component

View

however mutating objects like this is a

really really bad practice

so react really doesn't want you to do

this and that's because sometimes in

more complex situations this actually

won't work and in general it's really

just a bad practice of mutating objects

like this especially in a framework like

react which is all about immutability

and functional State updates

so never do this so if you really wanted

to update this object here we would

again create a stator function here

so not creating but basically taking

this Setter function out of the result

of U State and then here we would call

that

seller function

that then pass in the complete new

object

so the name should now

be Fred

so it's back to what we had before now

and now if we click next that still

updates the name to thread but it does

so in the correct way

so always treat State as immutable in

react so as something that you cannot

change directly but that you can only

change using the tools that react gives

okay so we have just seen the power of

state by using the use State function

but now let's get a better understanding

of how exactly State Works in react

and let's start from a fundamental react

principle that we have already discussed

earlier

so remember how we learned that in react

we do not manipulate the Dom directly

when we want to update a component's

view right so react is declarative not

imperative and so we never touch the Dom

in our code but if that's the case then

this leads us to the question of how do

we update the component on the screen

whenever some data changes or whenever

we need to respond to some event like a

click now we already know that the

answer to this question is state but

here we are trying to derive it from

first principles

so anyway to answer that question we

need to understand another fundamental

react principle which is the fact that

react updates a component view by

re-rendering that entire component

whenever the underlying data changes

now as soon as we will reach the section

about how react Works behind the scenes

we will learn exactly what actually

happens inside react when a component

re-renders but for now just know that

re-rendering basically means that react

calls the component function again so

each time the component is rendered

so conceptually we can imagine this as

react removing the entire View and

replacing it with a new one each time a

re-render needs to happen

but again we will learn exactly what

happens later

now react preserves the component State

throughout re-renders and so even though

a component can be rendered and

re-rendered time and time again the

state will not be reset unless the

component disappears from the UI

entirely which is what we call

unmounting

now speaking of state it is when state

is updated that a component is

automatically re-rendered

so let's imagine that there is an event

handler in the view for example on a

button that the user can click

so the moment that button is clicked we

can update a piece of State in our

component using the set function coming

from the use date hook so just like we

did in the last lecture right

then when react sees that the state has

been changed it will automatically

re-render the component which will

result in an updated view for this

or as a more real example we can look at

the simple advice app that we built

right in the first lecture of the course

so in that application each time we

click the getadvice button a new piece

of advice is fetched from the API then

when that data arrives we store the data

in the advice State variable so we

update the advice state

so let's imagine that the new advice is

quality beats quantity

react will notice this date change and

re-render the component so it will

remove the old one and display a new

updated component view on the screen

and with this I hope that the mechanics

of State in react are now really clear

to you so the conclusion of all this is

that as react developers whenever we

want to update a component view we

update its state and so react will then

react to that update and do its thing

and in fact this whole mechanism is so

fundamental to react that it's actually

the reason why react is called react in

the first place

so on a high level moving from the

component level to the application Level

now react reacts to State changes by

re-rendering the user interface

that's the main thing that it does and

therefore it was decided to call this

Library react

and with this we have come full circle

from the first lecture about why

Frameworks exist

there we learned that Frameworks exist

to keep UI in sync with data and so now

we have learned a bit better how react

so to practice State a little bit more

let's now implement the open and close

functionality for our component

so looking at the demo here what we want

to implement now is this functionality

that when we click this button here then

this part of the component disappears

and then when we click it again then it

is back so since this is something that

changes on the screen

that means that we need a new piece of

State

let's first comment out this other state

that we have here so that we created for

our experiment I will not completely

delete it just to keep it as a reference

here but anyway let's now create a new

piece of State

so this is going to be called is open

and then again the convention for the

setter is to call it set and then the

name of the state

so set is open

so equal use

State and by default our component

should be open therefore we pass in

value of true so is open starts as true

so that's then our default State value

for the is open state

so that's the first part of using State

the second one is to then actually use

this state variable in our code

so what do we want to achieve with this

well whenever it is true we want this

here to show and if it's false we don't

want it to show

and whenever it's false we don't want

this to show so what this means is that

we need conditional rendering

so let's do that

now we cannot wrap all of this here into

JavaScript mode now

but let's still try so I selected all of

it and then I will open the curly braces

to enter JavaScript mode but this will

not really work because this can only be

done inside some element

however react is still not happy

so what do we have here

ah test is not defined

so that's because we just removed this

piece of State here from before

so let's just comment this out and give

it a save

and again we first needed to create this

div element here outside basically to

start or jsx and so then inside that jsx

is where we can enter the JavaScript

mode and we need this JavaScript mode

and then as for the conditional

rendering let's simply use the end

give it a save and that's already it so

whenever this is true then the second

part here will be returned and when it's

false then only faults will be returned

so that's just what we learned in the

previous section

all right now since this is true nothing

happens here so this is still visible

but if we were to set it to false

then our component should disappear

yeah so it's gone

and therefore what this means is that

this is working

so let's set it back to true and with

this we finish the second part of using

State and now the third part of using

state is to actually update the state

so for that we need our button here in

the corner and for that

we need to write some more jsx

so let's do that here

so button with a class name of

close

and then here we can use an HTML entity

of times which will basically write an X

there we go and now we need our event

handler so for that let's again use the

on click prop so to directly attach the

event handler onto this element

and this time just to show you let me

actually create a function inline here

so instead of creating a handle function

out here like these two I will now

Define the function directly here so

just to show you that sometimes this is

also what we do especially when we have

some very simple logic

so we need to create a new function and

now what do we want to do here

well we want to update the is open state

so set is

open and then again we need to pass in

the new state so the updated State and

what should that be

well it should always be the opposite of

the current state so if this open is

true it should become false and if it's

false it should become true and the way

we do that is by using the not operator

so again that's just common and standard

okay and this should now already work

so let's just reload here to get rid of

that error and

yes beautiful

that's working nice

so our view is updated so it's

re-rendered and so then after that

re-render is open is no longer true but

it's false

therefore then this entire part here of

jsx is no longer rendered

right but then when we click again this

function here is called again which will

then switch its open to the other state

so from false to true in this case and

so updating this piece of state will

then cause react to re-render the

component this time width is open to

true

so when reactant sees this piece of code

is open is true and therefore this jsx

is then returned and so with this we

update the view right here in our

application

great now what I want you to notice

about this is that

let's change the state here

so again with this here we change the

step state which right now is at number

two

and now if we toggle this state so if we

change the state and change it again you

see that react did indeed remember the

state of the step even though we did

re-render this component multiple times

in between

so if we set it to 3 and then again I

can open and I can close which means

that this component so this view here

has been re-rendered two times still it

will remember this other piece of state

so the three is still here and so that's

why we say that state is like a memory

of the component it can hold this

information over time even though we

render and re-render it over and over

great so with this I hope you start

seeing how we can use state in different

situations and for different things in

practice

now just one small thing that we could

change here and this has nothing to do

with state is that we actually don't

want to return just one element here

so we want to return basically both this

part here and the button and so this

means that this is a great use case for

a react fragment here

so before I do that let's just inspect

and so indeed we have or root which is

basically everything so the entire app

and then in there we have this diff

which is this one but again let's say we

don't want that let's say we just want

to have the button and then this steps

div

so let's remove this from here

and from here

and so now we have remember a fragment

so that's like the root of this jsx

element here which will then disappear

in the Dom

so if we take a look now then we only

have this button and the step stiff so

again whenever you're in a situation

like this so where you need a piece of

jsx to return to elements then the

as web developers we rely a lot on

developer tools so things like the

console or the element in Spec panel in

our browser and so since tools are so

helpful for developers the react team

build devtools specific for react which

can be extremely helpful when working

with State and so since we're working

with State now let's go check them out

and actually since the beginning we got

this message here in our console telling

us to download these Dev tools so you

can open up your console and then here

you will find the link to the place in

the react documentation where we then

can find a link to the dev tools

so here is the link for the Chrome web

store and then for the other browsers

but since we're using Google Chrome this

is the one that we want

and if for some reason this link here

didn't appear in your console you can

just Google Chrome

react

Dev tools

so yeah that's going to be this first

one and so then once you're on this page

or on this one we're just the same you

can just download this extension and

install it in your Google Chrome now I

cannot do this because I'm on a guest

window so let me quickly fix that

and so now here in this window I can

actually use these Dev tools as well so

hopefully you installed the tool so just

like any other Chrome extension and then

once you did down here once you have

these developer tools here already open

you will see one tab which appears here

or actually two which are coming from

the react Dev tools so that's this

component Tab and this profiler tab and

since we're going to use this all the

time we can even drag

well actually not

now we can like drag it here to the

beginning where it will then stay now

here it says loading react Elementary

which should be fast so let's try that

again and actually it only worked for me

after closing and reopening my browser

so if you see the same error message

that I had previously down here then

please go ahead and do the same now but

so now everything is working and so

let's take a look at these Dev tools and

in particular of this component part of

the dev tools because again there's

another part which is this profiler but

we will come back to that a bit later

so components basically as the name says

is for showing a component tree

now right now we only have one component

so only the app component and so then

this is the only one that we can see

here but if we had more then all of them

would be showing up down here and we

could see our entire component tree

so I will show you this again once we

have that

the point here now is that we can take a

look at all the state that is inside

each component

to make this even

a bit bigger here so you can actually

see

well that's maybe too big or

I can also make the entire window bigger

so just like this

so you see here that first we have this

props which is for all the props that

the component that is currently selected

is receiving and in this case we of

course are receiving no props so nothing

there but then here is the interesting

part

so here we then have a list of all the

hooks and so here we have these two

entries one for each state hook that we

used so remember that we created the

state with use State and these use

functions are hooks therefore they are

here in the list of folks

but anyway what's interesting is that we

can now manipulate these values down

here to experiment with them

for example when we have a Boolean value

we here get this checkbox

and so then we can toggle it which will

then also toggle the value here so from

True to false

so basically we can do the same thing as

in the UI but here with the dev tools

and so that's very useful and it's a bit

similar to what we also can do with CSS

here in the element tab so here we can

do similar things

so this was inspired by that

and then of course here we can also

change this date

so we can go from one to three directly

or of course we can also try with values

that we usually cannot access from the

UI

so by clicking these buttons we cannot

set the state to 10. for example but

maybe for some reason we need to see

what the UI looks like with 10 and so

then we can come here to the dev tools

and set it to this

now again this is just a small demo

example so here that wouldn't be

important but in bigger and large scale

applications this might be necessary

from time to time and so this is very

very important to keep in mind that you

can use the dev tools for this kind of

thing

so that's one thing and as I mentioned

earlier it's also very useful to be able

to see the entire component tree right

here because when we have many many

files in a project and dozens or even

hundreds of components in our app maybe

then it can become quickly out of hand

and we can lose sight which components

are where and so then a component tree

can become very handy so instead of

drawing that manually we just come here

and there it is

okay and that's for now all I had to

tell you about these Dev tools very

handy make sure that you install them

and we will come back to them in future

it's very common that we update a state

variable based on the current value of

that state and so let's now learn how to

best do that

and in fact we are updating State based

on the current state all the time here

so here for example in set step we take

the current step and then subtract one

and here the same so here we take the

current is open State and toggle it

basically and so this is what I mean

with updating State based on the current

now the way we are doing it right now is

working just fine right so our app works

fine but now let's imagine that after a

few months we come back to this app and

then we want to change something so

let's say that we want this handle next

function here to actually move forward

twice so let's say that we want to set

the step state twice

so there's nothing stopping us from

doing that

so we can do this once and duplicate it

so this is perfectly fine we can call

the same function twice

but what what happens now so what do you

think is going to happen when I click

next now

so in theory it should take the step

which is currently 1 add 1 so 2 and then

here it should do the same from two to

three right but again Watch What Happens

so it only updated the state once now we

will go into detail why exactly this

happens but for now what I need you to

know is that we should not update State

based on the current state like this so

the way that we have been doing it

instead what we should do is to pass in

a callback function here

so instead of a value we pass a function

which we'll receive as the argument the

current value of the state

so let's remove this here and let's

create a function and I will just create

a simple arrow function here

and so as I was saying this will receive

as an input the current value of this

date

now there are multiple conventions on

how to call this argument so we could

again uh call it step but this might

then be a bit confusing we can call it

the current step for example or just s

and so this is what I'm going to do now

so just an abbreviation

and so then here we can do s minus 1

just like before and so this will now

work the exact same way

right so the view here was updated in

the same way as before but this is a

little bit more correct because if we do

so again receiving the current step as

an input which we just call S but it

could be called anything

and so then here we return that current

plus one and so if we run this again

then it works so then it is updating the

state twice

so it started at 1 then therefore this

callback here received the value of 1

and then one plus one was two and then

here in the next state up that updated

value is already passed here into this

callback and so then we have two plus

one which makes three now here we

actually do not want this of course so

we just want to move forwards by one but

in order to be safe for future updates

it's a good idea to always use a

callback like this when we want to

update State based on the current value

of that state

so let's do the same here

so again here we are also doing the same

so we are also

setting the is open State based on the

current one

so let's just call it is

and then toggle

and that works beautifully

now when we're not setting State based

on the current state then of course we

can just pass in the value as normal so

just like we did here for example so

that also happens sometimes and so in

that case we need no callback then we

just pass in the new state value as we

do here and as we also had here

previously

so again in many situations that would

work just fine

so before we only had the S minus 1 here

and nothing else and so that worked as

well but in order to be safe for future

updates or for working who hit

co-workers it's best to update the state

in a more safe way like this and so from

now on I will do this each time that we

update the state based on the current

as we finish this first dive into State

I want to share a few more important

thoughts or ideas about State as well as

so first of all there is one important

technical detail that you should be

aware of and this might seem obvious but

it's still worth mentioning so what I'm

talking about is the fact that each

component really has and manages its own

so even if we render the same component

multiple times on one page each of these

component instances will operate

independently from all the other ones so

in this example the three counter

components all start with a piece of

State called score which is set

initially to zero then if one of the

buttons is clicked that increases the

score by one for each click but only in

that component the state in all the

other components stays the same so again

if we change the state in one of the

components that won't affect the other

components at all and so the same thing

of course is going to happen when we

click one of the other buttons or even

when one of the components is removed

from the UI entirely

so State really is isolated inside of

now if we analyze everything that we

just learned about State we can come to

the conclusion that we can basically

think of the entire application view so

the entire user interface as a function

of state or in other words the entire UI

is always a representation of all the

current states in all components

and taking this idea even one step

further a react application is

fundamentally all about changing State

over time and of course also correctly

displaying that state at all times

and this is really what the declarative

approach to building user interfaces is

all about

so instead of viewing a UI as explicit

Dom manipulations would State we now

view a UI as a reflection of data

changing over time

and as you know by now we describe that

reflection of data using State event

handlers and jsx

so we describe the UI react does the

rest

now this might all sound a bit

philosophical at this point in your

journey but trust me as you become more

and more experienced in building react

apps and working with State you will

truly and deeply understand everything I

just said here

okay and now to finish let me give you a

few guidelines on how to use state in

so practical guidelines is always what

students like the most and here this

also kind of serves as a summary of

State in general

and these guidelines are for you to keep

as a reference so there is a lot of text

here that I will just quickly go over

now so first of all you should create a

new state variable for any data that a

component should keep track of over time

and the easy way of figuring this out is

to think of variables that need to

change at some point in the future

so if you're used to building apps in

vanilla JavaScript those would be

variables defined with let or with VAR

or also an array or object that you

mutate over the application's life cycle

so in react you use state for those

another way of figuring out when you

need state is this whenever you want

something in a component to be dynamic

create a piece of State related to that

thing and then update the state when the

thing should change or in other words

when you need it to be dynamic now since

this thing is a bit abstract let's think

of a modal window that can be either

open or closed so for a modal window we

can create a state variable called is

open that will keep track of whether the

model is currently open or not

then when is open is true we display the

window on the screen and if it's false

we hide it simple right

so whenever you want to change the way a

component looks like or the data that it

displays just update its state which you

usually do inside an event handler

function

now when you're actually building your

components it's gonna be useful to

always Imagine The component's View so

the component rendered on the screen as

a reflection of State changing and

evolving over time

finally there is one common mistake that

many beginners make which is to use

state for every single variable that you

need in a component

but that's really not necessary so do

not use state for variables that should

not trigger a re-render okay because

that will just cause unnecessary

re-renders which can cause performance

issues so it's very common to need some

variables that are not State and so for

those you can just use regular variables

defined with const but we will come back

to this in the next section

all right so this is my first set of

guidelines about state which should be

more than enough for now so if you truly

internalize these then building react

applications in the future should be a

lot easier for you

and I say this because I really believe

that mastering state is the most

difficult part of learning react but

once you overcome this hurdle and truly

internalize when you need State and how

it all works it will unlock react

development for you and so that's why I

spend so much time here showing you how

thank you so to finish up this part I

want to once again do a quick comparison

of the react code that we just wrote

with an equivalent vanilla JavaScript

implementation of the same app

and this vanilla JavaScript

implementation I actually gave you at

the beginning of this section

so we placed it right in the public

folder so let's now open that up and

open it here on the side

so again the vanilla JavaScript

implementation is inside an HTML file

where here we have first the HTML and

then separated the JavaScript

so this HTML might look familiar as it

is quite similar of course to this jsx

the only thing we don't have here is the

button to open and close the component

so I didn't include that part

but anyway here then starts or script so

we have the same messages and then here

we have to manually select all of these

Dom elements based on the classes that

then next we have this let variable here

with a step which we will then update

down here in these event handler

functions so here we took the elements

that we selected manually and used add

event listener on demo we have a similar

logic inside of these event handlers to

basically update the step variable so

when we go back the step goes -1 and

when we go forward the step goes plus

one so this is a bit similar

so what we have here so these event

handlers but the big difference is that

here all we have to do is to just update

the state and so then react will keep

the UI in sync where here we first

update the state variable and then we

have to call this function which does

the Dom manipulation

so here inside of the update UI values

function we need to now manually update

the Dom and keep it in sync with the

step state

because of course as soon as we click

these buttons here if all we did was to

update this value then nothing would

happen in the UI so after doing that we

need to then call this function here or

of course we could also just have all of

this code here but since we need the

same code here

I just place it into this function

so then here we manually update the text

content of the message while here in the

jsx it is simply declared right in the

markup so here we have imperative code

that tells JavaScript step by step what

it needs to do so update the text

content then set the class list set this

class list and set this class list so

set the class to active in case that the

step is currently active while here

that's all just declared in the jsx

we don't tell react to do anything we

just write that here the step should be

equal to the current step and that here

the active class should be inside the

class name if the step is greater equal

1 what we don't need the imperative Dom

manipulation that we have here

so we talked about this now many times

and so I think that this is enough set

at this point but of course it would be

a good idea for you to keep comparing

now these two implementations

there's just one small thing that I want

to do here which is going back to the

previous lecture where I told you that

each component has and manages its own

so what I want to do now is to prove

that to you in code

so let's actually take all of this code

and place it into a new component which

we will call step

or actually let's

called this component here step then we

don't have to do so much copy pasting

then let's remove this and actually call

it steps

all right and now here we do our app

again so export default

app and then this app

so let's say here we have a div and then

the steps to time now just a few more

changes we need to do so now since we

have two components on the same page

let's actually

return a diff here so that the button

and then these steps are all in the same

place

and then just one quick change in the

CSS please

so down here in the close let's just

let's close that

put it here on the side and then as you

reload you will see that now we have two

steps on the page so we successfully

reused our steps component

so this is now no longer the app again

it is steps and we can nicely see that

in the react Dev tools

so now we have a bit of a bigger

component tree so we have app and then

it has two child components

so but what I wanted to show you is that

as we change the state in this one for

example the state here will stay the

same and so even though both of them are

steps component the state in each of

them is completely isolated

so of course I can also close this one

and this one stays open

and we can obviously also see that down

here in the dev tools

with a bit more space even

yeah so the first steps here the state

is three and it is visible so that's

this true here while the second one the

state is one and it is not visible okay

so that was just a small and quick

demonstration and so now that we have

used State a couple of times here it's

time for you to practice State on your

thank you

welcome to the next coding challenge

which as you can imagine is all about

so what I want you to build in this

challenge is this very simple date

counter so here we have the current date

but then when we click here on the plus

icon you see that the count increases to

1 and then it says one day from now it

is Tuesday June 22 while before it was

21. so then when we keep going up it

basically keeps adding this number of

days to the current date

we can also go back in time

so like six days ago it was this date

so that's the most basic thing but then

here we can also adjust the step

so for example if this step is 5 then

each time we click on the plus button it

increases by five so no longer by one so

10 15 20 and so on and so forth and the

calculation then here of course is still

the same

so that's what we're going to build

so open up a new code sandbox with

react.new or of course as always you can

also build this Challenge on your local

computer so for that you can just create

a new react app just like we have been

doing before

now here just to make sure you can see

I will make this a bit bigger maybe not

that big

and then I will actually just start

writing a little bit of code here

so just to show you what I actually want

so I want you to create this

counter

which for now will just

and then all we want to do is to include

and that's it so you can leave

everything else the same even the Styles

let's just leave them here and just

focus on this counter functionality

now this part here with the dates can be

a little bit tricky so what I want you

to focus on the most is actually the

counter functionality here so if the

dates are a bit too tricky then just

leave that until the end and you can

just print the current count value down

here or you can also just Google for

example JavaScript add days to date

okay so I will leave this up here so you

can see what you are supposed to build

and then I meet you back here in a

all right so welcome back hopefully you

had some success with this

so there's actually a lot of moving

Parts here with handling the events and

all the state

so hopefully the lectures that we had

previously were enough for you to

understand how this works but if not

there's really no problem with that at

all so hopefully you just did anything

even if just a very simple counter

that's also fine

but anyway we know that we want discount

value here to update in the UI

so the view of this component should

update whenever we click on one of these

buttons

so that's a good sign that we need some

state right

so let's start by creating the count

so const

is you state and now for some reason the

use date didn't automatically get import

from

nice

and now well we need to show this count

on the screen and then we need to update

it so as always the same three steps so

first declaring the state variable then

use it in the jsx and then update it

so here we are missing the default of

zero

and then let's just create one div with

these two buttons

and also with the value of the counter

itself

so starting with that value actually

let's just count and then

decount

value

so count is zero that's correct and now

we need some buttons

and on click

and here I will actually not create the

event handler function separately but

instead I will just Define them in line

here but if you did it separately that's

of course no problem at all

so what do we want to do here so this

one here is to decreasing the value

so set count

and we want the new count to be the

current count minus one so what that

means is that we want to update the

count State based on the current state

and therefore here we now should pass in

a callback function remember that

so I'm going to write C for count so

this stands for count and remember it is

the current value of the count State and

so then we want to return that count

minus one

and that should already be it

let's just use this here for the minus

sign

well let's actually just close down this

sidebar

so copy and paste and here just plus one

so give it a save

and well let's just adjust here the

output a bit

and beautiful

that's working already so the component

view is being updated as we update the

great and so now let's just also display

the date down there

so for that let's create a paragraph or

first let's actually calculate that date

so maybe you Googled how to do this as I

so let's just Define a variable called

date and then new date

and of course you could just leave it

like this or you can just pass in a

string

to Define any other data that you want

for example June 21st

20 27 so just for fun

so that's not a date today as you can

imagine

but anyway now here we can on the date

object called the set date method and so

then here we can do date Plus

get the current date

whoa what's that uh yeah date Dot

so getting the current date and then

adding a value

so that value can be the count

all right so we're using now our count

is to add that count to the current date

basically and so then that's what we can

but again this part was kind of optional

here really so this is not what I was

concerned about what matters is that you

got the state part right

but anyway here let's Now log the date

and then convert it to a nice readable

string so to date string

all right now here we got some problems

and that's because yeah right now or jsx

has two root elements that's because I

by mistake

place this outside the div

but there we go

so you see that's already working

nice now we are missing that part here

that says the 30 days from now

for example or today or 10 days ago so

and so to do this let's add

maybe another span

and then let's create a span so just for

some inline text

and now here then let's create that part

of the string

so if the count is zero

then it is today

so then here we can output the string

today

and if not for now let's

return nothing

and here we have a problem and that's

because here we need a colon

so count is not 0 right now but now it

so today is this date

so that's correct but now as an

alternative here we need to also account

for the past and for the future

so we actually need two more different

values here and so here we need another

ternary operator Now using Nest

deterneries is quite ugly and can be

quite unreadable so usually I advise

against using that but while here let's

just break that rule

so basically here we have the else

branch

and so in here we can ask if the count

is greater than zero then the string

should be

let's use a template literal

tender count

days from today is

count days

not like this

all right so prettier took care of

formatting it for us

so it's at least a little bit more

readable

so that works five

is uh here we're missing the space

and now for the past

so minus four days ago was

and yeah that fixes it so we have now

this main counter working

so basically this part here is working

and now let's worry about the step

and the step is going to be quite

similar

step and set

step

and here I need to learn how to write

step apparently

and then use State again and here the

step by default is one so because by

default when we click here we just want

the counter to go up by 1.

all right and now you can just like copy

paste this because it's going to look

very similar

but here then we have

the step

then here also the step and here

also set step in both

these places

so let's see and yes that's working

however of course if we now click here

then that step is not being applied here

so we are still simply adding 1 or

subtracting one

so how do we now put these two together

well as I was just saying by default we

are just subtracting or adding one but

that's no longer what we want instead we

want to add or subtract the step

and

and we can even go negative here I think

maybe we should change that but never

mind that's too much work so now if we

add three we are actually going into the

past

but yeah that's no problem

great so that wraps up this challenge it

works exactly as what we had set out to

build so hopefully you had some fun with

this hopefully you also did have some

success and so yeah let's keep going in

this section and actually we will just

in the next lecture create a brand new

very very nice project so I hope to see

in the second part of this section let's

now build our first project that has

some real interactivity and so let's get

straight to it

and by now you know the drill so if

you're on windows open up your command

prompt if you're on a Mac open your

terminal please

and then as always navigate to the

folder where you want to create your

project

so that's my desktop and then in there

run npx

create react

app and then please specify version

number five here and then finally the

name of the project which is going to be

Travel list

then hit enter and then let create react

app do its thing and in the meantime I

will give you a quick tour of the app

that we're going to build

so this is the far away app which is a

simple Travel list where we can add all

the items that we need for our next trip

so for example let's say we need two

boarding passes that we really cannot

forget

and then we can hit enter or click here

and to then that item gets added here to

the list and also you see that down here

we have the statistics that just got

updated

so that's already some interactivity

right there but of course we can do more

so for example let's say we don't need

the charger anymore for some reason so

we can just click there and it's gone

we also can Mark these items as

completed so basically as packed

so let's say we already packed that one

and that one and then down here it says

we already packed two which is fifty

percent

but there is even more so we can also

sort uh by these three things here so

input order or by description or by the

packed status and so then the packed

items here they appear at the end

and finally maybe once we are back from

our trip and want to prepare our next

one we can just clear the entire list at

once

so it then asks us if we are sure and

yes we are and indeed then our list

becomes completely empty

and that's it so I think this is a

really nice little project for us to

learn some more interactivity and it has

all these nice but simple features that

we are going to build and on top of that

I also really like this nice design here

it's a bit retro which I think really

fits the vibe of this application

and now before we start writing any code

let's actually take a look at how we can

break up this entire design into

so this first big yellow part I think we

can call this the logo of the

application and so we're going to create

one component called logo just for this

then next up we clearly have some form

here and so that's where we are going to

put these elements so yet another

next then we have this entire list which

I think can be called the packing list

and then in there each of these items is

well just called an item we could call

it a packing item maybe but we'll see

once we get to the code

finally down here we have this other

area which I think we can just call

stats or statistics

so this is how we are going to break up

this user interface into components and

we will talk a lot more about how we

actually do this so how we arrive at

these different components but that's

not the focus of this application here

we just want to work a little bit more

with state with events and also learn

about how we can handle form submissions

so if that sounds fun then let's quickly

move on to the next lecture and start

so with our project now installed let's

start by building the static layout of

the application

and as always let's start by getting the

starter files which in this case is just

this CSS file so of course that we don't

have to write any Styles or selves

then place that here into Source now

there will already be one

so just replace that

and since we're already here we can get

so all of these so in the end we just

have app.js index.css and index.js

okay then just renaming

this here once again

and then let's drag and drop it onto DVS

so here we already have our files as

always we need to clean this one here

because we are importing some files that

we no longer have basically

but that's it and once again if you feel

like it you can actually delete all of

this and write the code yourself just to

practice how we can set up this react

app from complete scratch but I will

just leave this here

because yeah in the end when you build

your own applications you will always

just leave this here as well you're not

always going to write everything from

scratch but here I actually want to

delete everything and start from scratch

so export default

app

so this is usually always the same as

well here so you always have your app

parent component which will include all

the other components and let's actually

start with these other components so

just the components that we talked about

that's function

logo

and now I will just quickly duplicate

just to make this a little bit faster

list

and then we also have or stats so these

are the four big components that we

identified in the last lecture remember

and so let's now write a little bit of

jsx for each of them

starting with the logo so the logo is

many times an image but in this case we

will just have a primary heading

and we will say far away and then let's

add some Emoji here

now the way we write emojis on the Mac

is by hitting Ctrl command spacebar and

on Windows the shortcut is Windows plus

period

so like this so the Windows key and then

plus this Dot

all right then here let's use a palm

tree so this one here

just like this and in case you can't get

these emojis to work you can always just

copy them from the final files of this

project or you can of course just ignore

them as well so these are just to make

the design a little bit nicer

okay that's enough for the logo

so we will just write some very simple

starter jsx here for each component as

we are scaffolding basically this layout

so here let's just return a div with the

and again you can of course explore the

CSS file and see all the CSS that I

wrote for these class names that we are

so in here later we will have these form

elements like the select box the input

box and that button but for now we will

just write the text

so what do you need

for your trip

and here we also had some Emoji let's

add that as well

okay and notice how eslint is

complaining that we are not using these

variables here but of course we will do

that soon by including all of them here

in the global parent component so here

in this app

but again let's leave that for later so

we do that in the end

for now we just write the static part of

just like a placeholder there

and let's make this one here a footer

element so remember how this stats is

really at the bottom of the page and so

a footer seems like a good fit here

so let's write you have

and then here in the end we will have a

number so let's just use an X for now

items

on your list and you already packed and

then again an X which is X percent of

the total then here we also had some

emoji

I think this one was also formatted

and now with that let's come here to our

app component and use all of them here

in our layout and if you want you can

actually pause the video here and do

that as a challenge so just create one

div element with the class of app and

then include the four components in the

so this

so with the class of app

and then one by one one after the other

we just include them here

so first a logo

tender form

so actually exactly in the way that we

and by the way in more real apps and

also a bit later in the course we will

start placing each of these components

here into one individual file so we will

then have one file called app.js for

this component one called logojs for

this one and so on and so forth but here

since we are still learning I think it's

easier to build all of them here in the

same file because otherwise we are

jumping around all the times through

these files and so that then makes

everything a lot more confusing

especially when we get into topics such

as child to parent communication

so to finish the stats

and that's it

so no component is yellow here anymore

and so that means that we didn't forget

any

and yeah with this we are done so

let's open up our integrated terminal

like this and we are already in the

correct folder

and let's wait for it

beautiful

well here it seems we missed uh some

class

and so this footer here

needs the class of stats

yeah wonderful so this is what it's

supposed to look like and it looks

exactly like ordemo well except of

course for these details right here

which we will take care of starting in

the next lecture so next up we will

start rendering some static items here

so we will not yet dynamically add new

items to the list but we will render

some static items from an array here in

how I said earlier how rendering lists

is one of the most common tasks in react

development

well this application is no exception

and so let's now render the list of

packing items

and first of all let's go to our CSS

file because that's again where I pasted

this array of initial items

we can Auto close index.js and I will

so you see that we have once again an

array with a few objects and in this

case each object describes one item to

be packed so each of them has an ID a

description quantity and here the packed

property which tells us whether this one

has been packed or not

So based on this we will then display

the item a little bit differently

so here

well here we don't have any

so here in the demo app

so you see right now it's not packed but

if it is packed then you see it is like

strike through

okay so let's now take these items here

and render them as a list into our UI

so as the name says we're going to do

that in the packing list

so first of all let's again use semantic

HTML and convert this div into a UL

so into a unordered list

all right and then immediately here we

enter JavaScript mode because remember

how we render lists in react

well we simply use the map method that

we already know on the array

so initial items and later on we will of

course then when we make this Dynamic

use another array here but again for now

here we just want to render something so

okay then inside the map method each of

all right and then for each item what we

want to render is an item component

so let's immediately write that here and

we will then create the item component

in a minute

so item and then we pass in as a prop

the entire item

so item and then item again

let's close this here

so you see we have a lot of items here

so the name of the component the name of

the prop and then here the object itself

which remember is the argument of this

callback function in each iteration over

this array

so nothing new here at this point I hope

so a gift is a save but of course item

is not defined so let's quickly take

care of that

and now here we need to accept the props

so we can do it like this remember but

even better we can immediately

destructure this and then give it the

name here of the prop that we passed in

which is item and again it could be

anything it could be object like OBG or

X or anything

but yeah it's easier to just call it

item here because that's what it is it's

just a packing item so to say

so here this item should be now An Li

element so a list item because that's

usually what direct Children of the UI

or of the UL element should be and then

just to start just to see if it's

working let's simply render

uh I think it's called description

yes that's it we'll just copy that

actually

so item dot description give it a save

so we have passports and socks now The

Styling here is a little bit off

and the reason for that is that here I

actually did a mistake in the HTML

so here let's actually create a div

and then it's this div that is supposed

to have the list class

all right and the reason for that is

that later on we will have another

element in here for these filters so we

will have a div for these two things

down here

all right so of course for me that's

easy to see now because I already built

the app beforehand but once you start

building your apps on your own there

will be a lot more back and forth which

of course I cannot do here in this

course because then it would take just

forever

okay but anyway let's now uh add some

more here so we don't just want the

description we also want

uh this icon here for deleting and later

we will want this checkbox but let's

leave that for later actually

so here let's create a span element so

for the text

let's grab that

paste that here

and then we also want the item dots

let's see it's the item dot quantity

exactly

so item dot quantity and notice how

sometimes prettier creates like these

empty strings here in our jsx so many

times this is not necessary so just get

rid of that

and now finally we need that delete

and for now we won't attach any event

handler here but we will just place an

icon here in the form of an emoji

so maybe like that

so this x right here and again if you

can't make this work then you can just

write the X like this

or also

all right so this has now been rendered

here based off this list and if we

duplicate this and add something else

here like

a charger

one charger

then there it is now to finish let's

just mark one of them as Pact

make this one true

so that we can add some additional

styling here so we want to basically

have some strike through there

so that's simple stuff

so let's come here to the item and here

we will now conditionally add some

styling

so instead of conditionally adding a

class here I want to conditionally

simply add some style so let's write

style and then it immediately enters

JavaScript mode but now I will not

immediately write the object of CSS

properties instead let's actually use

the ternary operator to decide which

object the style should actually receive

so if item

is packed and here we don't really need

a condition because this is already a

Boolean

so if it is packed then we want an

object which will contain some CSS for

the strikethrough

but if not so if the item is not packed

then we will want to return this empty

object and so then no styles are going

to be applied

so the CSS property that we're looking

for is called text

decoration

through like this and that worked quite

all right so

let's try another one just for fun

and yeah immediately you see that it

gets strikethrough as well

so this was yet another way of using the

ternary operator to conditionally set

some style here so you see that we have

a lot of freedom in react and again we

simply use the JavaScript tools that we

one of the most important things that we

do on the web is to interact with web

applications through forms so forms are

fundamental in web applications and so

let's now start learning how to work

with forms in react

and first off when we build forms in

react we use the normal HTML form

so we have a form and then here let's

add the select the input and the button

so just looking at the demo here in HTML

this is a select element this is an

input element and this is just a regular

here we need to change that as well and

there is a setting in vs code that will

make it so that as I update this one the

closing tag also gets updated but I will

find that out after this video and then

I will let you know

but anyway let's now create that select

element and now here we want to create a

bunch of numbers

so inside the select

we create one option

with the value and here let's use again

JavaScript mode

so in order to pass in an actual number

one and not the string of one

let's just duplicate this a few times

because people actually not use this so

you don't need to write this code if you

don't want to

so this is just to show you what we will

do instead in a minute here let's just

create that input first

of the type

text and let's also include a

placeholder here

and again this is just normal HTML

finally a button with a

no okay beautiful so that looks just

like here

or very similar

so here we have the one two three so

these three values but here

in the real app we have 20. so of course

we don't want to write these 20 options

over there by hand

right so instead what we do is to inside

of JavaScript we will create an array

with the numbers from 1 to 20 and then

we will Loop over that array and

basically create a list of option

so let's do that and we will use a nice

trick which is called array Dot from and

it's not really important how this

function works

so let's just follow this here and

actually we will do this all the time

and react so this trick is actually

quite important

so as a first parameter here we can pass

in an object with the length property

and set that to 20 so that will then

create an empty array with 20 elements

and then as a second part we can pass in

basically something like a map function

so that will receive as a first argument

the current value and as a second

argument the index

and so here we are only interested in

that index because we will now return

that index

which starts at 0 plus 1. and so then we

get an array which goes from 1 to 20.

if we want it we could just grab this

piece of code right here and run it in

side of our console

make it a bit bigger and yeah indeed we

are missing the key somewhere there but

never mind we will fix that in a minute

and so indeed here we get that array

from 1 to 20. all right and now all we

need to do is to again use the map

method

and loop over this

to create now a list of these option

so again specifying the value and now

that value is simply num

and we need the key and that key is also

num

so remember how that when we render a

list we need to give each of the

elements a unique key so the number here

is of course unique

and then here also num

so give that a Save which makes this a

little bit more legible and so this

option is basically just exactly what we

had before here manually but now we

create that dynamically here

automatically from 0 to 20.

so there it is

so since we were speaking of this key

here let's also go to this list and fix

the key there

so right here where we have that map we

need to also pass in the key

so that key again needs to be something

unique and what is unique

is this ID property well not yet but

here let's use a three and so now these

IDs are unique and so those are the ones

we are going to use

so usually when we get an array of

objects each of these objects should

have an ID so that's then the perfect

candidate for using here as a key

and again we will learn later exactly

what this key is and why it's so

important but without it react will

always complain

all right after reloading it it is gone

and so let's go back to our form

and the form is actually already

complete at this point and so let's now

talk about events

so basically what we want to happen is

when we click on this button here we

want this form to be submitted and so we

can then react to this form submission

with an event handler

so let's do what I just said first let's

actually create the event handler and we

will do that

just like before write in the component

function so here we create another

function and this one is typically

called handle

submit

all right and now all we need to do is

to listen for that submit event

so how do you think we do that

well we go right here to this form and

then we add on

submit and then all we need to do is to

pass in D handle

submit function that we just created and

again really really important to

understand is that we don't call the

function here so we don't do this

instead react we'll call the function

for us as soon as the on submit event

happens

now when exactly is that submit event

going to happen

well simply as soon as we click here on

this button

but for now of course nothing is

happening because we don't have any

logic in or Handler function yet

now another way in which a form can be

submitted is by hitting the enter key

while we are here in the submit so when

I'm here and I hit enter Then you see

that the form got submitted actually so

maybe you saw that there was a brief

flash of reloading and that's just the

normal behavior of forms in HTML so that

has nothing to do with react

now let's just do this one more time so

I can show you

so writing test and then submitting

Watch What Happens

so as I told you before there was like a

brief Flash and then the page actually

reloaded and so the text that we got

here is gone

now remember that whole conversation

about the single page application where

I mentioned that in a single page

application like we want to build with

react we usually can submit a form

without the page reloading so in other

words what we want is for this page not

to reload and so we need to disable this

default behavior of HTML

so the way we do that is to accept the

event here

and then here we can use event dot

prevent

default and again this is normal

JavaScript right here

so if you used to working with forms in

vanilla JavaScript then you probably

so let's see what happens now when we

yeah then nothing happens so that's

actually exactly what we want now we

want no reload so we want to stay here

on the same page so building a single

page application

now what with this e here actually how

does it get here

well as soon as the submit event happens

react will call this handle submit

function and when it does so it will

pass into the function the event object

so an object with all the information

about the current event

so again that's very similar to what

happens already in vanilla JavaScript

so here we could also

basically write this

so this would be exactly the same but

it's then a bit more obvious what

happens so here this function gets the

event and then we call handle submit

with that event

but that's kind of redundant so let's

remove that

so let's just quickly recap what we did

here which was actually not a lot but

it's still important to understand what

happened here

so first of all we just created or form

elements and then the important part is

that we are listening now for the submit

event that happens on the form and that

event happens on the form as soon as we

click this button or as soon as we hit

enter while we are in this input element

and again that is just some normal

behavior of HTML

now we could also not listen to the

submit event and instead listen for on

click right here so we could do

like this and then for example create a

function handle

click

so instead of handle submit so that

would also work but it would only work

on the click of the button

so that would then not work when we hit

enter while here

but we do actually want that and so

let's instead listen for the submit

and by doing so we are leveraging the

power of HTML forms

now the next question is how do we

actually get this data from the form

into this event handler right because of

course the goal is to do something with

this data so with this quantity and with

this item description

well there are multiple ways of doing so

so we could get that data right from the

event object

so let's just see

we could

like lock this event to the console

so let's see what happens

so here we get this synthetic bass event

and we will talk about what the

synthetic event is a bit later

but you see that here we get the target

so basically the element on which the

event was fired and then there we have

for example the input on which we can

see the value

so test is exactly what we have here

however in react we usually don't do

this instead we use something called

controlled elements but that's a topic

for a whole new video and so let's now

let's now learn about yet another

fundamental react concept which is

controlled elements so let's take a look

what they are and how we use controlled

elements when working with forms in

so to start what we need to understand

is that by default these input Fields

like this input and also the select they

maintain their own State inside the Dom

so basically inside the HTML element

now this makes it hard to read their

values and it also leaves this state

right here in the Dom which for many

reasons is not ideal so in react we

usually like to keep all this state in

just one central place so inside the

react application and not inside the Dom

and so in order to do that we used a

technique called controlled elements and

so with this technique it is react who

controls and owns the state of these

input fields and no longer the Dom

so since we want to now keep this data

inside the application what that means

is that we need some state right because

that form data of course changes over

time and we also want to maintain our

application in sync with it

so in order to implement the controlled

element Technique we follow three steps

first we create a piece of State

so let's start with that and we will

start here with this actual input

element so with this text field right

there

so that field is for the item

description and so we call it

description and then as always the

setter function is set

description

and so then we use the use statehook so

the use State function and then just

like before when vs code shows us this

Auto completion here make sure to click

here or to hit enter because that will

then automatically include so it will

import this use statehook into this file

so it will automatically include this

line of code and then for some reason

that didn't work in your vs code then

make sure to just write this out by hand

Now the default value for this

description can just be an empty string

like this

and so now we finished the first step of

this technique so we have our piece of

state and now we use that state as a

value of the input field

so we come down here to the input that

we want react to control

and then we specify the value which

again is just a normal HTML field

alright so even in HTML you can use

value and then set it to something so we

could also do

just this

all right but now we don't want that but

give it a save and there we go

let's just reload to get rid of this

yeah here we get another warning and

it's already telling us the third step

that we need to take

but for now let's just see what happens

if for example here we write now

test

so you see now our input field has the

value of our state

okay and now for the final step we of

course now need to somehow connect this

state with the value that we are

actually going to type there

right because now the state will simply

always stay empty even if we type

something here

so react is now controlling this element

and always sets it to the description

but the description right now always

stays at this empty string and so no

matter what we do right now we cannot

change this

so what we need to do is to also on the

same element listen for the change event

so that's using the on change prop

and then here let's just Define an

inline function and this function

receives the event that was fired off so

in this case the change event

and then here let's just type the code

and I will explain what actually is

happening here

so set description e dot Target

dot value

all right and now if we type here

first let's reload again

now that we type here it works and to

make this even more visual let's come

back here to our Dev tools and then here

in the form

we need even more space

so you see that we have our state of

test and if we write here then notice

so we can write anything and then

basically it will get synchronized with

this state that we have in our

application and so now it is in fact

react that owns this date and that is

controlling the state

but now back here to this line of code

so basically whenever we type something

in this field the change event is fired

off and we can react to that event here

with this on change event handler and so

here we pass in the function and the

function as always receives the event

and then on the event we read Target and

e.target is basically this entire

element and then this element dot value

is exactly the text that we wrote

and just to make this a bit more visual

because I know that this can be a bit

tricky to understand so I want to make

sure that you get it

so let's log to the console also this e

so as I delete now this will fire off

the change event and so then here we get

e dot Target

so as I hover it you see that e dot

Target is the entire element indeed

so watch what happens when I set or when

I log e dot Target

so immediately that character that I

just typed was locked here to the

console and not just the character but

actually the entire value

so now I write another one and then now

we get T then tests and then test and so

it is this value that each time that we

write something we set as the new state

of the description

so just to drive this home each time

that we type here we set the state again

so we set it to the string that is

currently in this input field which will

then re-render this View

so this entire form here actually and so

then that new state of description will

get placed there as the value

so we always need both the value and the

yeah just like this and just to see if

we actually understood this we now need

to do the exact same thing with the

select element and if you want you can

actually pause the video and try that as

a challenge now

so did you try that well if not that's

no problem at all because we only did

this once so I understand that it's

still quite fresh and maybe confusing

but anyway we now also need to control

this select input element right here

so that's going to be the quantity so

let's call that state quantity and the

setter function

and then again use date and here the

default value we want it to be 1. let's

just say 5 for now just so we see the

effect in the UI

so that's the first step

now the second step is to then Define

the value

and so In This Moment react then starts

controlling this element

and you see immediately we get this 5.

again with this it's easier to see with

our Dev tools

and yeah so that's the five but of

course if we change this now then

nothing will happen

and so the reason for that is the same

as before because this value is now

coming from our quantity State the Dom

is no longer in charge of this value now

the only thing that we now have to do is

to give this the ability to change

itself so to basically update the state

so that's again using the on change

Handler

and this function gets the current event

and here we now do the exact same thing

so we set

quantity

based on E dot Target

Dot

value and by the way this value is

coming directly from the option so right

from here so that's why we need to set

here inside of each option

just to make sure let's give it a save

there we go

so you see it changed here and it also

changed here

maybe you cannot really see this as it's

right at the bottom but yeah here is the

10. now what we can see immediately is

that this is a string while in the

beginning when we first load the app

let's try that we get the 5 but without

the quotes So now this is actually not a

string it's still a number and that's

because we set the default here as a

number but then as soon as we change

for example to something then here we

get this string and so the reason for

that is that here e dot Target dot value

is always a string so before we place

this value into the state let's first

convert it to a number and we can do

that in a few different ways

we can use the trick of using a plus or

we can be a bit more explicit

for example using the number function so

I prefer to doing it like this which

makes the code a bit more readable

so give it a save and now

let's see yeah now we get a number and

of course still when we write here that

will also update the state down here

and this was actually an excellent demo

to show you how useful really these Dev

tools are because they allowed us to

immediately spot that we didn't have a

number here by the string and so with

this we prevented a potential bug in our

code

great so hopefully you got that so you

understood exactly how that works

so just to quickly recap the technique

of controlled elements basically

consists of three steps so we Define a

piece of State like this description

here then we use that piece of State on

the element that we want to control so

we basically Force the element to always

take the value of this state variable

and then finally of course we need to

update that state variable and we do so

here with the on change Handler where we

then set the description to the current

value of that input field and so with

this it is now this component so

basically it's react who is in charge of

the state and really of the entire

element and so that's the reason why

this technique is called controlled

great so that should be clear now and so

let's now go ahead and just quickly use

these values here

for example we can create a new item

so with description

uh also we have depict state in each of

these items

and by default of course the items

should not be packed so let's set it to

false here and then we also need an ID

now we could use some Library here to

generate that ID but let's do it quick

and dirty here just with date dot now

so that should just work here in this

case and then for now we will just log

let's go to our console reload all of

this and actually let's also set it to 1

which is the default that makes most

sense

so let's say that we need 10

shirts so hit enter

and beautiful so we got our data here

from the state and it contains the

description it contains the quantity

right here and then these other data

that we just defined so some random ID

and also this packed State set to false

so with this we learned how we get now

this data out of the form

now just to finish let's tweak or handle

submit function a little bit for example

when this happens so when we submit the

form without any item then still this

works but the description is simply set

to an empty string which is already

filed here

however we don't want this to happen so

when there's no description here then we

shouldn't even be able to submit the

form

so that's simple enough we can just add

like a guard Clause here

so we can say if there is no description

then return immediately

so basically then nothing is going to

happen and again this is just some

normal JavaScript nothing to do with

so you see nothing happens now

but if so

then we get our object and now finally

usually when we submit a form then

afterwards once that submission is done

deform should go back to its initial

so let's also do that and for that we

can simply use or Setter functions right

and so that's the beauty of react being

in charge of the form because now all we

have to do is to update the state and

then this enables react to automatically

keep this state in sync with these form

so basically that's the whole idea of

the controlled elements it's to allow

react to keep our component state in

sync with the state of these Dom form

but anyway let's now do what I just said

so setting the description back to its

initial State and set the quantity also

back to its initial state

so that worked really really nicely

so this form is now a lot more real

world it's back to its initial State and

then down here we get the data but now

what do we do with this data so at some

point we will want to actually render

this new object here into the user

interface so right here into this

packing list right

so how do you think we will do that so

how can we get this new state

so basically this new object that we

just created into this list

and just as a reminder there's a list

well it's even easier to see in the

component tree

so we have to form and here is the list

so we want to get the data from this

form into this packing list right here

so do you think that we could do that

with props

well not really right because these are

sibling components the form is not a

parent component of the packing list and

therefore we cannot pass props from form

into the packing list right so because

data can only flow down the tree but not

up or sideways so that was one of the

important things that we learned about

props remember that

so therefore if we cannot use props in a

simple way we need to find another

solution and so this is where we really

need to start thinking more about State

and State Management

but since this is so important as a

react developer I created an entire

separate section about thinking in react

and that section is up next

so what we're going to do now is to take

a break in this application and finish

this section with a brief summary and a

challenge to consolidate our knowledge

about how to use state in react and then

after that we will come back here to

this application and then we will really

make it work so then we will be able to

pass data basically from the form into

the list so that's going to be a lot of

fun so make sure to finish the section

and then right afterwards let's keep

a very common beginner question or

sometimes even an interview question is

this what's the difference between State

and props

well we actually already learned almost

everything to answer that question but

let's still make the difference between

State and props crystal clear in this

lecture which will also serve as a nice

so as we already know state is internal

data so data that is owned by the

component in which it is declared and we

can see that nicely in this small

example with two components

now on the other hand props is external

data so data that is owned by the parent

component and you can think of props as

function parameters so as a

communication Channel between parent and

child components where parents can pass

data into children

State on the other hand can be thought

of as the component's memory because it

can hold data over time so across

multiple re-renders now State can be

updated by the component itself and as

we already know this will then cause the

component to be re-rendered by react

therefore we use this mechanism of state

to make components interactive on the

other side props work very differently

they are read only so they cannot be

modified by the component that is

receiving them

however and this is something that we

haven't learned before when the child

component receives new updated props

that will actually also cause the

component to re-render and let's

actually Analyze That here in this code

example

so one of the props that was passed to

question is called upvotes and that

upvotes variable is actually state in

the parent component right it's created

using the use stay Tok and therefore

upvotes is in fact state

now if this piece of state is updated of

course the question component who owns

the state will be re-rendered but it

makes sense that the child component who

basically receives that state as props

should also be re-rendered right because

how else would the button component be

kept in sync with the state that it

received as a prop

so in conclusion whenever a piece of

state is passed as a prop when that

State updates both components are

re-rendered so both the component owning

the state and the component receiving

the state as a prop and so this is a

very important connection between State

and props that you should keep in mind

now finally while state is used by

developers to make components

interactive props are used to give the

parent components the ability to

configure their child components

so basically props can be seen as

settings in child components which the

parent component can Define as they wish

so if you ever get asked the difference

between State and props in a job

interview I sure hope that you're going

from my experience it's not super hard

to understand how State Works in react

but it can actually be quite tricky to

understand how exactly to use it in

practice in different situations but the

thing is that this is the number one

skill that you need to have as a react

developer and that's why I decided to

create this extra exercise that we're

going to build together now to give you

more situations and more opportunities

to practice

so let's go

and here is the exercise that we're

going to build and it's actually a small

project even so this is a flash card

project where a flash card is basically

a question on one side and then when you

click it you get the answer on the other

side so imagine that you can like rotate

each of these cards here which is what

many people use to study

so if I click here now again then it

will basically turn the card around

if I click here then it opens this one

and while this is open and I click on

another one then you see that one closes

and this one opens

all right so this is going to be a small

fun exercise which maybe looks very

complex to you right now but actually

all we need is one piece of state to

control all of this now I added a

starter file to the link of this lecture

so that's this code sandbox here and so

here we already have an array with all

the questions and once again that's an

array of objects

all right and so what we're going to

build is this flash cards right here

so all you have to do is to Fork now

this code sandbox or you can just also

copy paste this entire code into your

own code editor on your computer so

that's your choice but what I will do is

to now Fork this which will basically

create a copy in my own code sandbox

all right and so let's get started and

the first part is to actually render out

these different flashcards

like this so basically only the front

part which contains all the questions

so you see that each one has an ID a

question and an answer but of course by

default only the questions are visible

so we already know how to render lists

right we just enter JavaScript mode then

we take all questions array and map over

so each of them is a question

and then here we can render some jsx now

many times what we do here is to create

an extra component so just like we did

in the Far Away Travel list app that

we're currently building but we don't

have to so we can also just return some

jsx here and so that's what we're going

to do now

so just another div

and then in there a paragraph with the

question

so that's question

Dot question actually

then let's close that

and close the diff as well

and there we have it

now what's missing here is the class

of

flash cards so as you see I already

created some CSS so if you copy the code

into your own computer

then make sure to also copy the contents

okay now we see that here we have some

problems which are related to the key

exactly so each one needs a unique key

so key and then let's use

question.id because these are unique

values and as you know each element that

we render here inside the map so as a

list needs a unique key

so if I reload now then these errors

will be gone

okay so we have now our static Parts all

built out now what we need to do is

something to happen whenever we click on

one of these components here or actually

each of these elements

so how are we going to do this

well as I said initially all we need is

actually one piece of state and that

piece of state will keep track of which

question ID is currently the active

question and if that sounds confusing

then let's just write the code

let's

call this the selected ID and then set

selected ID

use state

and then here we will want to start with

null because by default we want none of

the questions to be open in the

beginning so to be selected in the

beginning and so that's what null is for

so null is basically just nothing

so now here we need to import

use

and now let's remember the three steps

of using state which I like to always

come back to because I think this makes

it a bit more helpful to understand how

we should approach this

so the first step is to define the state

variable which we already did second is

to then use that state variable and

third is to update it so as for the

second Point Let's now do that so let's

use this selected ID here for something

but well this time this is a bit tricky

right like what do we actually need this

selected ID for

well let's maybe make it easier by

instead of using null here using one of

these so one of the actual IDs so 9103

so if this is the state so let's imagine

that we just clicked

on this one here so how to give

components memory let's say that we just

clicked here and so that this is then

so how do we want to use this state

well basically here instead of

displaying the question we want to

display the answer

so we can do that we can say

question dot ID

equals

the selected ID and if it is display

question dot answer

and if not

well then of course the

question.question and so now here we

actually this time got the answer

and so that's already working

so let's do the same thing for The

Styling because here

actually this gets like with this red

background and so we can use a class

that I created for that and add it here

to this div

so let's do something similar then

so class name

enter JavaScript mode and then we do the

same thing so if the current question ID

is equal to the selected ID

then here the class name should be

selected

and if not then nothing and there we go

so beautiful

just make sure that you actually

understand what is going on here so as

we Loop over this array here each of

these elements is one of these divs

right and in each of these divs we have

access to the current question object

and then each of them has one ID

and so what we can then do is to compare

that ID with the selected ID so the one

that we have currently selected and if

that is the same then well it's just

what we have written here so if it is

the selected question so if the selected

ID is equal to the one that is in the

object then simply display the answer

and otherwise in all other cases well

then the display the question itself so

not the answer

all right and now let's set it back to

null and now all we have to do is to set

the state so that's the third step

so when do we want to update the state

it's whenever we click here so in one of

these diffs and so that's where we place

the on click Handler so as you see it

doesn't even have to be a button or

anything like that

and now what we are going to do is to

create a function here

just to make our code a bit easier to

understand

so for now just the name of the function

so here we need to know then pass in

that function

however that is not really enough

because well here

we will now call

set selected ID

but as the name says we now here

actually need the ID of the question

that should become the selected question

right and so what this means is that

this function needs to receive that ID

so that we can then set it here

so now we need to call this handle click

so simple enough question dot ID

but don't make the mistake of thinking

that this is finished and actually react

already gave us here an error so

remember that here we need to pass in an

actual function and not a function call

like we have here so this is calling

handle click immediately

that's not what we want

we want to pass in a function so that

react can then call the function as soon

as the event happens

okay and test should already be enough

at least for now

so that worked great

and as I click on another one then of

course this one becomes the active one

and let's check out the react Dev tools

because code sandbox actually also has

the react tools integrated

so when we come here to the app or

actually flashcards notice that the

state is now

9103 which is exactly this ID

when we click here it becomes

well that should have updated

but apparently it doesn't work that

so yeah well maybe never mind

let's just close this down again what

matters is that it is working at least

kind of because watch what happens when

I click here again

so nothing happens of course because

well because here we are simply passing

in that ID and then we are setting that

ID as the selected ID so just as

expected but as we see here as we click

again it actually closes the card again

so this functionality we already have of

changing between cards but when we click

on it that we don't have yet

so let's do that and that's not too hard

basically what we want to do here is to

set this ID based on a condition

so we want to say if the question ID is

different from the currently selected

one

then

the result here should be the ID and if

not

well then set it back to null

now here there's some problem

ah yeah I have one equal too much

all right so again if the question ID is

different from the already selected ID

then set the ID and so that's exactly

this Behavior right but if not so

basically if the question ID is already

equal to the selected ID then set it

back to null and so with null then none

of them will be active and

yeah that works and I think it makes

sense as well right

so this usage of State tier was quite a

bit different from what we had before

and so that's why I decided again to

include this exercise here by the end of

the section so please make sure to study

exactly what is happening here and then

after that I think you are ready for the

let's wrap up this section by continuing

to work on the date counter challenge

that we started earlier

so in this part 2 of The Challenge we

will upgrade the date counter that we

built before

so we can still click here on these

buttons to move forward in the date but

now we can also directly go to a date by

defining account here

so for example a thousand days from now

is well this one here or 10 000 or a

hundred thousand and you can keep going

as you wish

so let's put it back to one

and so that is the upgrade here for the

counter and the step is also different

so instead of these buttons that we had

before so similar to these ones we now

have this slider

and so now if we click here

we move up this 7 here but the 7 was now

defined using this nice slider and this

slider is actually just another type of

HTML input element but I will show you

that here in a minute

finally what we also have is that we can

reset

so when we click reset it goes back to

zero here and back to 1 in the step and

this button is only visible when one of

these two changes

so let's go back and let's do that

so here I still have the code from the

previous Challenge and what I'm going to

do now is to Fork this

so this will basically create a copy out

of that other one and so now I can keep

writing the code here without changing

the initial one

so what I wanted to quickly show you

here is that slider

so we can use the input

so as I said this is now an input and

the type is of range

and then we set a minimum value

you can set that to zero and a max value

to 10.

and there we go

so now this is of course an uncontrolled

element now so right now react is not in

charge of controlling this value and so

what you need to do as you can imagine

is now make this input element a

controlled element

and then also this one right here so

with this you will practice what we just

learned a little bit earlier

right and in case you have any doubt you

can just go back to that lecture and

check out the code that you wrote there

so let me just show you here the result

so you know what you have to build so

good luck with this Challenge and I see

you back here in a few minutes once you

are ready

all right let's Now quickly supercharge

basically our

counter component

so most of the things are actually not

going to change here

so we already have the step State all we

have to do is to connect it now

so with this input element

so the value of this element should be

of course controlled by that step state

and then we need the on change Handler

just like before

so we get the current event and then we

set the step

based on that event so event.target

dot value and then we can get rid here

and let's see

yeah that works already

and indeed well that doesn't really work

does it so it is adding the 10 as a

string so we have a bug in our code

so the problem as you can see is that

this value here is taken as a string

so that's actually the problem that we

had before and that we detect it using

the react Dev tools

and in fact the devtools are also

available here

so we could see the same thing here so

the state is 10. so 10 as a string

so we just do what we did before which

is to convert this value to a number

before we then place it into the state

so let's reload that here

take some time

let's set it to something

and that's working now and you see here

that we have

well that's not correct really

for some reason

but what matters is that here it's

actually working so maybe the

integration here in code sandbox is not

as good

but yeah never mind

what matters is that this part is

working already and now all we have to

do is to create an input element here as

well

so that should also not be so hard

so we no longer need this pen

text

the value here is count and then on

change

basically we want

so we get the current event and then set

count

and then this time we're not going to

forget the conversion part

so we convert to a number e dot Target

and now all we need to do is to close

down this element

give it a save and yeah this all looks

correct to me

well something's happening here let's

yeah anyway let's just reload here just

so this works and now if we input a

value here yeah nice

so that's really really nice

so with this we have a bit more control

over the component and we can calculate

dates from now which is quite helpful

but yeah let's just review quickly what

we did here

so these two input elements are now

controlled elements for the same reason

that we already saw before

so we have a piece of state and we then

connect that piece of State for example

here the step with the input element so

we force this input field to take the

value of the step piece of state but

that alone is of course not enough

because with that we would not be able

to then change here the value and so we

then need to handle the event of

actually trying to change so of sliding

here basically so each time we Slide the

change event is fired off and so then

each time that happens we want to set a

step with the current value of the

element so that's e.target dot value

nice and finally the only thing that's

missing is that reset so that button

so let's then create a button down here

let's create another div where we place

that button into

so reset close that

and close the div

so we want something to happen on the

click so we use the on click prop

and now here let's actually do this as a

separate function because here we will

need to set two pieces of State

so let's call this handle reset

now that does of course not exist

so let's fix that handle reset

and so what's going to happen here well

all we have to do is to set these two

back to their initial State using their

Setter functions

so set count will go back to zero and

yeah that works the only thing that's

different between the demo that I showed

you is that we should not display this

reset button when there's actually

nothing to reset

so basically what we want to do is to

conditionally render this part here so

let's wrap it into a JavaScript block

and then we can say if count is equal to

different than one

so count different from zero or step

different from one so zero is the

default for count and one is the default

four step and so if one of these

defaults is different then we want to

conditionally render this part so for

that we can again use the end operator

or maybe just why not let's this time

use the ternary operator

so in this case

maybe we should just

put a parenthesis around this

so just to make sure that this is one

condition that gets evaluated first

render this

and else

render nothing

all right so as soon as we change this

we get a button or as soon as we change

this the same

beautiful so that's exactly what we

wanted to build and so we are finished

with the challenge and we are finished

with the section and so let's waste no

time and let's keep working on the far

away list right in the next lecture of