- 00:00:01 so time to enhance the example from the
- 00:00:06 last video where we are able to change
- 00:00:08 the text of our home link here by adding
- 00:00:11 an input field and allowing the user to
- 00:00:13 do this and for that I will even
- 00:00:15 implement two-way binding which yes we
- 00:00:18 can do in react chairs too even though
- 00:00:20 it's not a default so I'll go to my home
- 00:00:22 component and then I'll add a input
- 00:00:25 field here next to my button there
- 00:00:29 should be text and then I want to have
- 00:00:33 two things happen the first thing is I
- 00:00:36 want to show the initial value so or the
- 00:00:39 current value of the name of the link so
- 00:00:45 initially it should be home and then it
- 00:00:47 should stay – whatever we changed it to
- 00:00:48 the second thing I want to achieve is
- 00:00:51 that I want to well add an event
- 00:00:54 listener which fetches all the changes
- 00:00:57 the user makes and stores them so that
- 00:01:01 we are able to submit the changes
- 00:01:03 whenever we click this button let's
- 00:01:05 start with the first thing outputting
- 00:01:08 the value of D well the current text off
- 00:01:12 the link I need to pass this value from
- 00:01:15 my index component therefore from my app
- 00:01:17 component excuse me here I only pass the
- 00:01:20 change link reference to my on change
- 00:01:24 link name method but I also should pass
- 00:01:27 the initial link name like that and that
- 00:01:33 of course is just this state home link
- 00:01:39 this year that's the initial value and
- 00:01:42 that is the value of whatever we change
- 00:01:44 it to later on so we're passing this as
- 00:01:46 props and I'm passing this as props to
- 00:01:49 my home component and then as input I
- 00:01:52 can then bind the value property here
- 00:01:56 oops not after the slash though here
- 00:02:00 value should be this props initial age
- 00:02:07 well we'll see if that works the way
- 00:02:09 wanted to work important when binding to
- 00:02:13 value which of course is kind of a
- 00:02:15 built-in property of the input here we
- 00:02:18 have to use the curly braces because
- 00:02:20 well I want you well as you learned
- 00:02:23 before I want to reference something
- 00:02:26 from my JavaScript class here the props
- 00:02:28 in this case so if I save this we see 27
- 00:02:33 here that does not look right
- 00:02:36 initial age is probably wrong it should
- 00:02:39 be they call it I called it initial link
- 00:02:44 name and I'm not getting IDE support
- 00:02:47 because I didn't add it to my prop types
- 00:02:49 here that of course should get added and
- 00:02:52 it should be a string like that but that
- 00:02:56 if I saved as we see home looks much
- 00:02:58 better and if I type here well you will
- 00:03:01 realize that you can type as much as you
- 00:03:04 want nothing will happen you can't
- 00:03:06 change this got-damn value why is that
- 00:03:09 well let's app open the developer tools
- 00:03:12 and we already see a warning which warns
- 00:03:15 us about this behavior but I'm ignoring
- 00:03:17 it for now I'm going to rendering an
- 00:03:20 able paint flashing and then I'm typing
- 00:03:23 and as you can see it's constantly
- 00:03:25 flashing here it's constantly updating
- 00:03:27 this and now let's have a look at this
- 00:03:30 warning it tells me that I'm using the
- 00:03:32 value property on a form field but I
- 00:03:35 don't have the unchanged handler this
- 00:03:38 will render a read-only field and the
- 00:03:40 reason for this is that it will
- 00:03:42 constantly update the value but it
- 00:03:46 doesn't listen to any changes I make so
- 00:03:49 I have one way binding to a form field
- 00:03:52 which is kind of bad because I'm
- 00:03:54 ignoring the user input with that so I
- 00:03:57 would either have to delete the value
- 00:03:59 here or set up two-way binding by adding
- 00:04:03 the on change listener which means do
- 00:04:06 something whenever the input field
- 00:04:08 changes or put an other word when the
- 00:04:10 user types something in there so upon on
- 00:04:13 change I want to call the on handle
- 00:04:17 change method here for example and
- 00:04:19 get the event pass to that all these
- 00:04:22 event handles here always past the
- 00:04:24 default JavaScript event object so here
- 00:04:28 I will then execute or I will bind on
- 00:04:31 handle change without parenthesis but
- 00:04:35 since I will lead the desk keyword I
- 00:04:37 will also bring it on a new line and
- 00:04:41 then use the es6 syntax to don't have to
- 00:04:45 write bind this so on handle change and
- 00:04:48 then pass the event which I get passed
- 00:04:51 automatically by JavaScript or by react
- 00:04:54 Chasse so the event object is always
- 00:04:56 available when executing words like this
- 00:04:59 so now I'm calling this on handle change
- 00:05:02 with you end being passed to it and then
- 00:05:06 here I can call this set state and
- 00:05:08 change the state and of course I want to
- 00:05:12 change the state of my home link
- 00:05:14 property here which should now be event
- 00:05:18 target value the event target of course
- 00:05:21 is the input field and the value is well
- 00:05:23 the current value of it with death I can
- 00:05:28 go back and nothing changed well that is
- 00:05:33 not really the result you wanted is it
- 00:05:35 well nothing changed because here we're
- 00:05:41 binding to this props initial link name
- 00:05:43 but in the on change handler we're
- 00:05:46 changing the state so I should probably
- 00:05:50 bind to this state home link now if I
- 00:05:55 save this
- 00:05:57 it's called changed link now I can
- 00:06:00 change it finally but it's not
- 00:06:03 reflecting the currently select or yeah
- 00:06:06 selected text which just displayed in
- 00:06:09 the header well the reason for that of
- 00:06:11 course is that home link is set to
- 00:06:14 change link initially I can set it to
- 00:06:17 this props initial link name
- 00:06:23 and remove this just props I do pass
- 00:06:28 them in a constructor I do get them
- 00:06:30 passed into the constructor
- 00:06:31 automatically now we see home and now if
- 00:06:35 I change just changed and click on this
- 00:06:37 button we see that we put change there
- 00:06:42 now if I put change to dad works change
- 00:06:48 it to home again it works so that we add
- 00:06:52 quite another important bit to our
- 00:06:54 application two-way binding and you saw
- 00:06:57 why it is important in this case here if
- 00:06:59 you want to display the default value of
- 00:07:01 our header text and we finish this cross
- 00:07:05 components communication example where
- 00:07:07 you saw how to change the state in an
- 00:07:10 average component from another component
- 00:07:13 so have two components work with each
- 00:07:16 other and in this case even two then
- 00:07:18 change something in a third component
- 00:07:20 the header component in this case so if
- 00:07:23 dad you should have an overview over how
- 00:07:26 you can use react to work with all your
- 00:07:29 components past data use events use
- 00:07:32 props use state and maybe you already
- 00:07:36 got the impression that this can lead to
- 00:07:40 some problems if you have multiple
- 00:07:43 components model components you want to
- 00:07:45 talk to each other maybe even sibling
- 00:07:48 components nested over multiple layers
- 00:07:51 of components where you then have to
- 00:07:53 build kind of a props chain to get you
- 00:07:57 linked from one component to the other
- 00:07:59 component and that really can lead to
- 00:08:03 problems in bigger projects which is why
- 00:08:06 we'll have a look at redux which helps
- 00:08:08 us solve this problem an entirely new
- 00:08:12 serious coming up on this channel or
- 00:08:14 maybe already available when you will
- 00:08:17 watch this video because readex will be
- 00:08:19 the solution to this problem
- 00:08:20 but redux aside for now these are the
- 00:08:23 features react.js gives you and these
- 00:08:26 features are not bad as you see you can
- 00:08:29 achieve a lot with them you just have to
- 00:08:31 keep in mind that if you feel kind of
- 00:08:35 worried by the growing complexity of
- 00:08:38 that that there is a tool to make it
- 00:08:41 simpler again and that I will dive into
- 00:08:43 the tool in the future
