- 00:00:00 now of course sometimes you want to not
- 00:00:04 only click a button and open alert in
- 00:00:06 your parent component you want to pass
- 00:00:09 some data with it potentially some data
- 00:00:12 you insert it in an input field so let's
- 00:00:14 do this next let's say the name of my
- 00:00:20 header this home link so if there is
- 00:00:22 home or something else is something
- 00:00:24 which should get set through the user so
- 00:00:29 I want to set this or I want to be able
- 00:00:31 to change this now in this video we'll
- 00:00:34 cover a lot of the things we learned in
- 00:00:35 previous videos like state component
- 00:00:38 interaction and so on so let's start by
- 00:00:42 implementing a link between the index
- 00:00:46 chairs the app component and the home
- 00:00:47 component and you home component I want
- 00:00:50 to be able to change my home link so the
- 00:00:55 name or the text of the link in the
- 00:00:58 header therefore I will create a new
- 00:01:01 function in my app component which I
- 00:01:04 will name on change link name something
- 00:01:08 like that whatever you like on change
- 00:01:11 link name and this takes an argument of
- 00:01:15 new name because of course I need to
- 00:01:17 know what you name should be now in here
- 00:01:19 I want to change the name and for dad of
- 00:01:22 course I will need set state so I will
- 00:01:26 first add a constructor to set an
- 00:01:29 initial State this state should be a
- 00:01:32 chalice with object where I have my home
- 00:01:35 link key and that should be home
- 00:01:39 initially then here I no longer passing
- 00:01:43 a pure string but instead I'm passing
- 00:01:46 this state home link oops
- 00:01:49 home link like that then and you on
- 00:01:53 change link name method I can call this
- 00:01:55 stead state I'm still in the app
- 00:01:57 component here and I'm setting the state
- 00:02:00 such that home link now is the new name
- 00:02:03 so with that my parent component the app
- 00:02:06 component is prepared I'm using set
- 00:02:08 state – well actually then trigger a
- 00:02:11 rewrite
- 00:02:12 of the UI of course and to be able to
- 00:02:15 actually change the home link and now I
- 00:02:19 need to call this on change link name
- 00:02:21 method from my home component now in
- 00:02:25 order to be able to do this I will pass
- 00:02:27 it as a problem so I will just split
- 00:02:31 this upper multiple line so that it gets
- 00:02:33 a bit easier to read and then here I
- 00:02:36 want to pass change link so this will be
- 00:02:39 the method which can be executed in my
- 00:02:41 home component later on and this should
- 00:02:44 of course refer to this on change link
- 00:02:46 name but since I use the best keyword in
- 00:02:50 on change link name I need to find this
- 00:02:54 here or use the es6 syntax I showed you
- 00:02:58 a couple of videos ago which you can see
- 00:03:00 in the home component here on the upper
- 00:03:03 button so with that I'm passing a
- 00:03:06 reference to this method to my home
- 00:03:09 component and I can use it there so
- 00:03:11 let's go to the home component then here
- 00:03:16 I will also create a new method which I
- 00:03:18 call on change name and in this method I
- 00:03:22 will call this props change link I guess
- 00:03:27 was it change link name then maybe I
- 00:03:30 should name this on change link to on
- 00:03:34 just change link gets executed and I
- 00:03:38 want to pass this dot state dot home
- 00:03:42 link I have yet to create this field in
- 00:03:45 my state here why am i outsourcing this
- 00:03:49 or creating this in an extra function or
- 00:03:51 method I could execute it in my code
- 00:03:54 down here – yeah that's right
- 00:03:56 I could execute this line here in my
- 00:03:59 code down here – that would work but I
- 00:04:02 don't want to do that I want you well
- 00:04:04 make it a bit easier to read and not put
- 00:04:06 all my logic in your render method here
- 00:04:08 which is something you basically you
- 00:04:10 shouldn't do so with that on change link
- 00:04:14 is setup and I can then create a new
- 00:04:17 button which allows me to change this
- 00:04:20 change
- 00:04:22 header blank like that that's my new
- 00:04:27 button and here I'll add my classes
- 00:04:32 button button primary as always and of
- 00:04:36 course my onclicklistener where I want
- 00:04:40 to execute this unchanged link and find
- 00:04:45 this again since I'm using the this
- 00:04:47 keyword in the unchanged link method so
- 00:04:51 with that I would kind of change my my
- 00:04:55 link but this state home link is
- 00:04:58 currently undefined because in my state
- 00:05:01 I only have agent status and not home
- 00:05:03 link so let's add home link here home
- 00:05:06 link could be changed linked initially
- 00:05:11 so with that I just saw that I also need
- 00:05:14 to call super here in my index.js file
- 00:05:17 the app component I need to you always
- 00:05:19 need to call super first if you're
- 00:05:21 extending from a class forget this I
- 00:05:23 forgot this so now we see it's working
- 00:05:25 and if I click on change header link
- 00:05:27 watch this home text here it got changed
- 00:05:31 we changed it through our home component
- 00:05:38 by executing a button here and then
- 00:05:43 executing a method in the app component
- 00:05:45 changing the state there and passing the
- 00:05:49 new state as a prop to our state less
- 00:05:51 component header so there a lot of
- 00:05:54 things are coming together which we
- 00:05:56 learned in the last video changing state
- 00:06:00 cross-community component communication
- 00:06:03 and finally updating the props in a
- 00:06:06 stateless component and as you see
- 00:06:08 stateless does not mean that that that
- 00:06:09 it doesn't get rear-ended a few props
- 00:06:11 change it only means that this component
- 00:06:14 itself has no access to the state but we
- 00:06:16 can't change the state from outside of
- 00:06:18 it that's of course important to
- 00:06:20 understand so with that we have to
- 00:06:24 change that up but of course still we
- 00:06:26 don't have and/or currently we don't
- 00:06:29 have an input field where we could
- 00:06:31 change it we're not we're only able to
- 00:06:32 change it to well changed linked changed
- 00:06:36 because that is the initial state for
- 00:06:38 Homelink
- 00:06:39 I set up in my home component so the
- 00:06:42 next step of course is to add an input
- 00:06:44 field and allow a user to define what
- 00:06:47 should get changed
