Coding

ReactJS Basics – #11 Communicating between Parent and Child Component

  • 00:00:00 so of all the talking about state and
  • 00:00:03 props ends up on there's still one thing
  • 00:00:05 I promised a couple of videos ago and we
  • 00:00:07 still haven't seen it yet how can we
  • 00:00:10 communicate from a child to a parent
  • 00:00:12 component so in our parent component we
  • 00:00:16 can pass data to the child with props
  • 00:00:18 but what's the equivalent for passing
  • 00:00:20 something from the child to the parent
  • 00:00:22 is that not possible yes it is possible
  • 00:00:25 and actually we use props for this too
  • 00:00:28 and how well this video shows you let's
  • 00:00:32 start simple and say my index file the
  • 00:00:35 app component here once you pass a
  • 00:00:38 function into the home component which
  • 00:00:41 should be executable from inside the
  • 00:00:45 home component so I'll add the method
  • 00:00:47 here and I'll call it on read and all I
  • 00:00:53 want to do here is I want to throw an
  • 00:00:54 alert so open this alert dialog where I
  • 00:00:57 say hello like this now I want to call
  • 00:01:02 this function or this method from my
  • 00:01:06 child component so this is kind of from
  • 00:01:09 child to parent interaction right
  • 00:01:11 because of course I could also pass data
  • 00:01:13 from the child to the parent and I will
  • 00:01:15 show this later on to you so I call on
  • 00:01:18 greet where I want to call on read now
  • 00:01:20 in order to do this I need to pass a
  • 00:01:23 link to this method to my child and I
  • 00:01:26 can pass data with props of course so
  • 00:01:30 I'll pass something called greet does
  • 00:01:34 the prot name I choose and then in
  • 00:01:36 single curly braces I'll link to this on
  • 00:01:40 say hello no need to bind this here
  • 00:01:45 because I don't use this keyword in this
  • 00:01:48 method if I were to use it there you
  • 00:01:50 need to bind this so with that I'm
  • 00:01:54 passing a reference or a link it's not
  • 00:01:58 cold on say hello by the way
  • 00:01:59 on read I'm passing a link to this on
  • 00:02:03 grid method as props to my home
  • 00:02:07 component so back in my home component
  • 00:02:10 by then one two useless
  • 00:02:13 link so I will add a number button here
  • 00:02:17 add a horizontal line maybe then a
  • 00:02:20 button like that where I just say greet
  • 00:02:24 and then I want to fire this greet
  • 00:02:27 method in my parent component so course
  • 00:02:30 first some bootstrap styles here like
  • 00:02:33 that primary but then more importantly
  • 00:02:36 of course I add my on click listener on
  • 00:02:40 click like that and what do I want to
  • 00:02:44 execute well of course I want to execute
  • 00:02:47 this props greet greet is when I got
  • 00:02:53 passed in here and don't add parentheses
  • 00:02:55 of course this props greet now since I
  • 00:02:59 get these props I should also configure
  • 00:03:02 them here so I'll set greet to be of
  • 00:03:06 type react prop types and then func like
  • 00:03:12 this now with this setup in place if I
  • 00:03:16 safe doesn't go back to my application
  • 00:03:18 and click to greet button you see the
  • 00:03:20 alert getting opened so I'm successfully
  • 00:03:23 interacting between child component and
  • 00:03:26 parent component I'm reaching out to my
  • 00:03:28 parent component from my child component
  • 00:03:30 by using this link reference I got
  • 00:03:33 passed by my parent cuter child because
  • 00:03:36 that is how you
  • 00:03:37 well do this in react.js you pass
  • 00:03:40 references from the parent to the child
  • 00:03:43 that's the only direction possible but
  • 00:03:46 by passing links to functions or methods
  • 00:03:48 you of course create a way back for your
  • 00:03:53 child you give it a way to execute
  • 00:03:56 something in the parent component class
  • 00:03:58 and that is how you set up such
  • 00:04:01 parent-child communication