Coding

ReactJS Basics – #13 Two-Way-Binding

  • 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