Coding

ReactJS Basics – #12 Passing Data between Parent and Child Components

  • 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