Coding

ReactJS Basics – #7 Events & ReactJS

  • 00:00:00 welcome back we learned how to output
  • 00:00:03 data and learned what props are both
  • 00:00:07 very important concepts of course now
  • 00:00:09 with that we're ready to take the next
  • 00:00:12 step and learn what events are or you
  • 00:00:15 probably know what events are but how to
  • 00:00:17 use events in our react.js application
  • 00:00:20 so I'll go back to this home component
  • 00:00:23 and in here I'm actually going to clean
  • 00:00:28 this up a little bit so I'm going to get
  • 00:00:30 rid of children and user going to get
  • 00:00:33 rid of all of that stuff you just leave
  • 00:00:36 the other props name in each year and
  • 00:00:39 I'm also going to getting rid of the
  • 00:00:41 text here therefore of course in the
  • 00:00:44 next chance file I'm getting rid of my
  • 00:00:48 off the well content between the opening
  • 00:00:51 closing tag as well as the opening
  • 00:00:53 closing tag as well getting rid of the
  • 00:00:55 user object and deleting user object
  • 00:00:58 here too just to clean this up a little
  • 00:01:00 bit so that should still work it looks a
  • 00:01:03 bit leaner now next in my home component
  • 00:01:06 I want to create a button so I will
  • 00:01:10 trade a horizontal line below that I'll
  • 00:01:13 add a button on which I want to say make
  • 00:01:16 me older now I already do have my age
  • 00:01:22 here and I want to be able to increase
  • 00:01:24 that age right so here I want to do
  • 00:01:27 something whenever I click this button
  • 00:01:29 but first I'll add some butch foot
  • 00:01:31 classes here with class name button
  • 00:01:34 primary and then well it would be nice
  • 00:01:38 if we had some method we could execute
  • 00:01:40 whenever this button gets clicked so I
  • 00:01:42 will create such a method and I will
  • 00:01:45 call it on make older so on make older
  • 00:01:52 should get executed whenever this button
  • 00:01:54 gets cold and then I want to increase my
  • 00:01:57 age but how could I access to my age in
  • 00:02:01 the first place it's new properties here
  • 00:02:03 right well it would be a nice idea to
  • 00:02:05 save the age in a property of this class
  • 00:02:11 so not in this props property we're
  • 00:02:14 getting past from outside but remember
  • 00:02:16 we're using classes here we can create
  • 00:02:18 properties therefore so I'll create a
  • 00:02:20 constructor function again that's all es
  • 00:02:23 six staff if that is all new to you
  • 00:02:25 definitely check out some es6 tutorials
  • 00:02:28 and here first thing of course I have to
  • 00:02:31 do is call super to execute the parent
  • 00:02:33 constructors since I'm inheriting from
  • 00:02:35 reactive component and thereafter I'm
  • 00:02:38 creating a new property named age with
  • 00:02:40 this dot H and as set is equal to well
  • 00:02:45 in the constructor we actually get the
  • 00:02:48 props passed into it so here I can then
  • 00:02:52 access props H so this is the age I get
  • 00:02:55 passed into this component from outside
  • 00:02:58 and this is my property I create inside
  • 00:03:02 of the home component now I have access
  • 00:03:05 to this age and that I can make myself
  • 00:03:08 older let's say we add three years to
  • 00:03:11 the age when I click this button with
  • 00:03:14 that ike of course can also change my
  • 00:03:17 output here here i can that output this
  • 00:03:22 dot age right like so your age is this
  • 00:03:27 dot h now if we're safe this we see
  • 00:03:32 twenty seven stole the button won't work
  • 00:03:34 because we haven't hooked it up yet but
  • 00:03:35 we see that the extraction of the
  • 00:03:37 properties and he's saving in our own
  • 00:03:40 property works fine so I'm saving it in
  • 00:03:44 this age and I'm outputting this age in
  • 00:03:46 my well HTML code here in my template so
  • 00:03:49 Tuesday the last step is to hook at this
  • 00:03:52 button and I can add a click listener by
  • 00:03:55 adding on click now that just is how you
  • 00:03:59 add events in react is you have the
  • 00:04:03 event name and then just the on at the
  • 00:04:05 beginning so it's like the well default
  • 00:04:08 HTML or excuse me default JavaScript
  • 00:04:11 event handlers on click and then here
  • 00:04:14 you specify what you want to do upon a
  • 00:04:16 click of course I want to execute on
  • 00:04:19 make older but if we were to write it
  • 00:04:21 like this that would be wrong I need to
  • 00:04:24 delete the parentheses otherwise I will
  • 00:04:27 cuted immediately because again keep in
  • 00:04:29 mind this is javascript code here if I
  • 00:04:32 do this I execute it but I just want to
  • 00:04:37 place a reference to the functions
  • 00:04:39 function which should get executed
  • 00:04:41 whenever I click on it therefore I
  • 00:04:44 remove the parentheses now it's not
  • 00:04:46 getting executed instantly instead the
  • 00:04:49 button now knows so to say what to do if
  • 00:04:53 we click on it then it will execute it
  • 00:04:55 however that won't work as you will see
  • 00:04:58 if I save this and click on make me
  • 00:05:01 older nothing happens and in the console
  • 00:05:04 we see cannot read property age of null
  • 00:05:07 whenever I click this well why do we get
  • 00:05:11 this error what's going wrong here do
  • 00:05:15 you know what's happening here well good
  • 00:05:18 job if you figured out the issue is that
  • 00:05:22 we're binding it here or resetting the
  • 00:05:24 onclicklistener here this on make older
  • 00:05:27 will get executed now have a look at on
  • 00:05:30 make older there we're accessing disk
  • 00:05:33 and what's the issue with this keyword
  • 00:05:36 in JavaScript it's always referring to
  • 00:05:40 whatever executes a function it's not
  • 00:05:43 referring to my home class not to the
  • 00:05:46 object here it's referring to what is
  • 00:05:49 executing this method and here the
  • 00:05:52 button is executing this method
  • 00:05:54 therefore in order to make sure that
  • 00:05:58 this refers to the home object to the
  • 00:06:01 home class I have to bind this so I add
  • 00:06:05 bind and then this this makes sure that
  • 00:06:10 we're actually using this in the class
  • 00:06:14 context here by the way and never
  • 00:06:18 possible syntax remember this one here
  • 00:06:20 would have been to use a es6 arrow
  • 00:06:22 function so to do this say execute this
  • 00:06:28 function here and then here we will just
  • 00:06:31 return this start on make older without
  • 00:06:34 parenthesis
  • 00:06:35 with parentheses here so we would
  • 00:06:37 execute that's a funkier keep in mind
  • 00:06:40 that that is just how I es6 arrow
  • 00:06:42 function looks so this function would
  • 00:06:44 get executed immediately and it would
  • 00:06:46 return this on make older this function
  • 00:06:49 call which would then also use this age
  • 00:06:51 so if I save this and now click on it we
  • 00:06:55 still see nothing happening but if we
  • 00:06:58 reload we see we don't get an error so
  • 00:07:02 maybe we see something if I log the Kurd
  • 00:07:07 age to the console to trace down what's
  • 00:07:10 going wrong so let's save this and click
  • 00:07:14 on it well as you can see on the right
  • 00:07:17 the H is getting incremented correctly
  • 00:07:20 it's increasing but it's not updated
  • 00:07:23 here and that is because the state of
  • 00:07:27 the application hasn't changed and
  • 00:07:30 react.js will only rerender if the state
  • 00:07:33 has changed now what is this state and
  • 00:07:36 how do we tell we actually asked that
  • 00:07:38 the state changed that something we're
  • 00:07:40 going to have a look at in the next
  • 00:07:42 video