Coding

ReactJS Basics – #8 State of Components

  • 00:00:00 so we had the problem that we're not
  • 00:00:03 updating the state that the UI isn't
  • 00:00:05 updated that we're not seeing the H
  • 00:00:07 change here
  • 00:00:08 time to tackle this and time to learn
  • 00:00:11 what reacts state actually is we had
  • 00:00:15 props before and props is one of the
  • 00:00:19 important data construct so to say you
  • 00:00:21 garden react yes state as the other one
  • 00:00:24 props is what you pass into a component
  • 00:00:27 from outside of it state kind of is what
  • 00:00:31 happens inside of the component if you
  • 00:00:33 want to put it like that but basically
  • 00:00:35 state is something which is not getting
  • 00:00:38 getting changed from outside but instead
  • 00:00:41 which is triggered from inside the
  • 00:00:44 component yes you can create chains
  • 00:00:46 where you personally went to a parent
  • 00:00:49 component then change the state in the
  • 00:00:51 parent component but in the end state
  • 00:00:53 means the state of this component
  • 00:00:56 changed do something stay to something
  • 00:00:58 which can be changed by a component
  • 00:01:01 itself the props can only change from
  • 00:01:03 outside so what is this state thing well
  • 00:01:08 let's change our code here a bit and not
  • 00:01:10 create our own property in this class
  • 00:01:13 here but instead let's use this dot
  • 00:01:16 state this state is a property provided
  • 00:01:21 by a react component like this dot props
  • 00:01:24 by the way which sets our state and here
  • 00:01:28 I'll assign a JavaScript object where I
  • 00:01:33 then say H equals props dot H and now
  • 00:01:38 years important thing you shouldn't
  • 00:01:41 assign props to your state except for
  • 00:01:45 the case where this is just the initial
  • 00:01:47 value and that is the case here but to
  • 00:01:51 make this clear you might call this
  • 00:01:52 initial age so here change this to
  • 00:01:58 initial h2 that's just a naming thing
  • 00:02:03 and it's just a thing I do here to keep
  • 00:02:06 the good practice of making sure that I
  • 00:02:10 don't violate this rule of not
  • 00:02:13 props to state so of course also changed
  • 00:02:16 here in the prop types then so with that
  • 00:02:19 I have my age field in this state
  • 00:02:22 property object and when I increase my
  • 00:02:26 age what I will actually do is I will
  • 00:02:29 call a function react gives me or do you
  • 00:02:33 react component from which I extend
  • 00:02:35 gives me set state now that's an
  • 00:02:39 extremely important method because this
  • 00:02:42 method allows me to change my state and
  • 00:02:45 whenever I call this method react.js
  • 00:02:48 will trigger a rear-ending off the UI or
  • 00:02:52 at least it will have a look if it needs
  • 00:02:54 to re-render and i will come back to
  • 00:02:56 this rewritten rendering process soon so
  • 00:02:59 here this set state takes a javascript
  • 00:03:02 object where i then said whatever i want
  • 00:03:06 to change and that's important i only
  • 00:03:09 specify the changes here so here in the
  • 00:03:12 constructor i set up by state proto
  • 00:03:14 object and i could also have let's say
  • 00:03:18 status which is zero and then here in
  • 00:03:22 set state i only change the age status
  • 00:03:25 will not be deleted
  • 00:03:26 it's just that only age gets updated so
  • 00:03:30 then I set this state dot h plus free so
  • 00:03:35 X is the old age this stage will still
  • 00:03:38 refers to the unchanged state X sh and
  • 00:03:41 increase it by free and this will be my
  • 00:03:44 new age again status here will stay
  • 00:03:48 untouched that will trigger a UI update
  • 00:03:52 and now here in my code in my render
  • 00:03:57 function I will output this dot state
  • 00:04:02 dot H referring to the age stored in the
  • 00:04:06 state and to prove that these status
  • 00:04:09 doesn't changed i will output that too
  • 00:04:12 so this that status dot the start state
  • 00:04:17 dot status like that with dead if I save
  • 00:04:21 this go back to the application we see
  • 00:04:23 state as a zero ages twenty seven
  • 00:04:26 if I click on make me older boom it
  • 00:04:29 increases and now we see a change in our
  • 00:04:32 application while it took us quite some
  • 00:04:35 videos to make something change in our
  • 00:04:38 components but I think it's key to
  • 00:04:41 understand how react to the chance
  • 00:04:43 components work by building it up like
  • 00:04:46 that now we're able to change this
  • 00:04:49 because now we're able to change the
  • 00:04:51 state of our component we're not just
  • 00:04:54 getting data from outside of it or by
  • 00:04:57 setting it in a render function
  • 00:04:58 initially but we're changing it at
  • 00:05:01 runtime and that is what state does for
  • 00:05:05 us state is to key trigger for us to
  • 00:05:08 update our UI and of course with state
  • 00:05:11 you can then also update all kinds of
  • 00:05:15 things in your UI and I'll expand on
  • 00:05:19 this idea or we'll get deeper into react
  • 00:05:22 chasse in the next videos