REACT JS TUTORIAL #5 - Javascript Events & Data Changes in React Video Lecture | Learn React JS: Fundamentals for Front-End Developers - Front-End Programming

okay now that we know how to manage data
in our react application let's look at
actually binding events interacting with
user inputs and changing that data real
time so let's say we want to add an
input that's going to allow us to change
this title as we type so the first thing
we're going to want to do is let's go
ahead over to that header now let's add
an input and save it
that'll update now let's get rid of this
other header that we absolutely don't
need anymore
so then as this gets updated as this
header input gets typed in we're going
to want to take that change we're going
to want to trigger some kind of event on
the layout that says hey update your
state we want a new title that title
will then get passed into the header and
the whole rendering process will begin
because the state changed so the goal is
we've got to get this state to change so
let's go ahead and make a change title
method and then this will receive a
value so this set state well basically
is just going to do this right I'm just
going to set our state to the new title
and because we're receiving title here
we can actually use es6 and just go
title which is the same as doing title
equals title just cleans things up Thank
You es6 so there we go let's go get rid
of this we don't need you anymore
and now how we'll change title fire well
we're actually going to pass that in as
a prop to header change title equals
this change title now one thing that's
very important is when passing functions
or methods around you always want to
bind them to this if we don't do bind
this then it's going to execute in the
context of whoever's calling it so let's
say we pass in change tile title as is
and then header later says let's go this
props change title because remember we
got passed in as a prop then that's
basically the same as calling it there
on the header component so now it'll set
state of title on our header component
our header component doesn't do anything
with that nowhere in here is it looking
for
this dot state so that change title just
failed silently it didn't throw an error
and absolutely nothing happen so it's
very important that you always bind this
so now no matter who calls this change
title function it's going to fire on the
layout component so that's very
important that has bit me more times
than I can imagine and sometimes it can
take you a little while to figure out
exactly why your app is not working so
there's change title and then let's go
here into the header now you can see it
automatically is changing my title new
title so right away when it renders it's
going to automatically change to new
title but we want this to happen
whenever the user types in our input so
that's very simple we just add an on
change event again bind this because
you've always got to make sure it's
bound to the right context so whenever
the user input receives a change event
it's going to call our or handle change
and that handle change
Reesie receives a JavaScript event just
like a normal event in jQuery or vanilla
JavaScript woods so you can make this on
change you can make this on click you
can make this on blur basically every
type of event you'd expect so on change
it's going to fire this function and all
we're going to do is go this stop props
change title I call it change title or
update title change title so that's
going to change title let's actually get
that title out of the element constant
idle equals a target --top' value a
target is the element that's receiving
the on change so that's our input right
there and we're just getting that value
out so we've got our title let's pass it
on to change title layout is going to
fire change title which sets our state
as soon as that state changes the entire
react tree does a rerender and if
there's any changes that get printed on
out let's test it and see if it works
awesome
our title changed you notice green is
flashing here
because this guy's changing and green is
flashing there excellent that's working
great only change I want to make on this
is I want this to say welcome by default
I don't I want this to be two-way bound
to the state of the title so that's very
easy change we simply go in here and we
make the value this stop props title so
now by default my value is going to be
whatever the title is there we go
welcome boom add an exclamation what
just happened is is I actually added
that exclamation handle change fired
exactly the same thing state got updated
the whole tree rear-end 'red and now my
header actually rendered the input
actually got its value dynamically
updated to be whatever the new value was
so that is also very cool so if you were
to change this to value but you never
added an on change you get a very
interesting reaction here from react so
I'm setting my value but I'm not going
to listen any change events it's
actually nothing's going to happen no
matter how many keys I hit every time
there's a rerender it rear Enders the
value to be this props title which has
not changed so that's another thing that
can be frustrating if you're not sure
what's going on with react whenever
you're buying to give value you also
want to set up a change listener for
that so it actually changes when the
value changes so I hope by now you've
been able to get a sense of how that
reacts ecosystem works you basically
we've created an app that has data
living only in one place which is a
great thing because this has enabled us
to make really dumb components this
header doesn't really care where the
data comes from or what the data is it
just knows I'm going to pass title in
here and whenever this input changes I'm
going to call the prop that was handed
to me change title I don't care what it
does I just know that this is my job
our title component is even dumber it
just renders whatever you give it this
props title it's not aware of the data
it doesn't care about the data you can
move this to a completely different
application
if you wanted to the data could come
from a completely different place it
doesn't care so you get much more
reusability out of your components and
you get much more stability our data
only lives on layout right now and it's
just whenever the data changes we render
the entire application and we update the
Dom if there's any changes it makes your
application development much more simple
because you don't have to care about
near as many moving parts that's part of
the beauty of react I'm going to go
ahead and leave basic react here and in
the next videos we're going to move more
into some patterns of how we actually
deal with applications and how we deal
with routing and a lot of other great
things hope you've enjoyed this intro
course to react have a good day