1 00:00:00,000 --> 00:00:04,880 In this video, we're going to create a stateful component by first defining 2 00:00:04,880 --> 00:00:07,670 an initial state inside the counter class. 3 00:00:07,670 --> 00:00:11,105 You'll learn that in React state changes over time, 4 00:00:11,105 --> 00:00:13,556 usually in response to users action. 5 00:00:13,556 --> 00:00:18,170 So what part of the counter will change when users interact with it? 6 00:00:18,170 --> 00:00:22,170 The score will increase or decrease depending on which button they click. 7 00:00:22,170 --> 00:00:24,020 Score is our state. 8 00:00:24,020 --> 00:00:28,520 So now let's go into our Counter component and start creating state. 9 00:00:28,520 --> 00:00:31,270 Since state is an object, you create and 10 00:00:31,270 --> 00:00:35,410 initialize state within a class inside the constructor method. 11 00:00:35,410 --> 00:00:38,200 So first, I'll set up a constructor. 12 00:00:38,200 --> 00:00:42,670 Again, if you're not familiar with classes and constructor methods, be sure to review 13 00:00:42,670 --> 00:00:45,420 the Tree House videos posted in the teacher's notes with this video. 14 00:00:46,600 --> 00:00:49,970 Inside the constructor, I'll call super in 15 00:00:49,970 --> 00:00:55,350 order to call the constructor of the component class that we're extending. 16 00:00:55,350 --> 00:00:58,860 And this needs to be done before we can use the this keyword 17 00:00:58,860 --> 00:01:00,420 within the constructor. 18 00:01:00,420 --> 00:01:03,640 Then to initialize our component state, 19 00:01:03,640 --> 00:01:07,700 write this.state and set it equal to an object. 20 00:01:09,321 --> 00:01:14,330 You must name this object state otherwise this will not work. 21 00:01:14,330 --> 00:01:19,324 Since state is data that changes over time, we first need to set an initial 22 00:01:19,324 --> 00:01:23,207 state or the state of the component when it first bounce. 23 00:01:23,207 --> 00:01:28,420 The state in our counter is going to be the score we want to display for 24 00:01:28,420 --> 00:01:29,526 each player. 25 00:01:29,526 --> 00:01:33,070 I'll call the state score and set it to 0 by default. 26 00:01:33,070 --> 00:01:37,450 Now that we've initialized state, over end React dev tools, 27 00:01:37,450 --> 00:01:41,270 select a counter component inside a player component. 28 00:01:41,270 --> 00:01:45,950 And you should see a new property called State up here in the right pane. 29 00:01:45,950 --> 00:01:49,970 We see the course state and it's value is 0. 30 00:01:49,970 --> 00:01:54,862 Next, let's remove the score prop being passed to 31 00:01:54,862 --> 00:01:58,397 the counter and player components. 32 00:01:58,397 --> 00:02:01,520 Because Counter is now maintaining its own score state, 33 00:02:01,520 --> 00:02:05,630 it doesn't need the score information from its parent player component. 34 00:02:06,730 --> 00:02:11,010 You access state in a similar way to how you access props. 35 00:02:11,010 --> 00:02:14,170 In the Counter components render method, 36 00:02:14,170 --> 00:02:18,481 replace this.props.score with this.state.score. 37 00:02:18,481 --> 00:02:22,276 You can think of the render method in a class component 38 00:02:22,276 --> 00:02:26,508 as being a function of not just props, but props and state. 39 00:02:26,508 --> 00:02:30,343 In other words, if either props or state changes, 40 00:02:30,343 --> 00:02:36,070 React executes the render method to update what gets displayed to the user. 41 00:02:36,070 --> 00:02:38,326 Now once we refresh our app, 42 00:02:38,326 --> 00:02:43,687 we see that all the players scores are set to the initial state of 0. 43 00:02:43,687 --> 00:02:48,206 We can even change the score state of a counter component 44 00:02:48,206 --> 00:02:53,411 instance in React Dev Tools and see the score change on the page. 45 00:02:53,411 --> 00:02:57,936 Great, so you've just built your first stateful react component. 46 00:02:57,936 --> 00:02:59,314 Before we move on, 47 00:02:59,314 --> 00:03:05,270 I want to teach you a second way you can initialize state inside a React component. 48 00:03:05,270 --> 00:03:06,131 A shortcut, 49 00:03:06,131 --> 00:03:11,520 you'll often see state initialized inside a class constructor like this. 50 00:03:11,520 --> 00:03:16,060 But you can also initialize state directly inside the class definition, 51 00:03:16,060 --> 00:03:18,090 using a class property. 52 00:03:18,090 --> 00:03:22,516 You omit the constructor method and super all together, and 53 00:03:22,516 --> 00:03:26,100 reference the state property directly. 54 00:03:26,100 --> 00:03:30,150 You don't need to write it as this.state, just state, and 55 00:03:30,150 --> 00:03:31,430 set it equal to the object. 56 00:03:35,672 --> 00:03:39,074 This class properties syntax is a feature of JavaScript that's currently not 57 00:03:39,074 --> 00:03:40,320 supported in all browsers. 58 00:03:40,320 --> 00:03:44,148 Since we're using the Babel transpiler in our app, 59 00:03:44,148 --> 00:03:47,895 we don't have to worry about browser's support. 60 00:03:47,895 --> 00:03:53,090 Babel will transpile our code and add a constructor for us behind the scenes. 61 00:03:53,090 --> 00:03:55,150 The way you initialize state is up to you. 62 00:03:55,150 --> 00:04:00,390 I prefer the class property syntax because it allows for a cleaner class component 63 00:04:00,390 --> 00:04:03,890 and I don't have to remember to setup a constructor and call super. 64 00:04:03,890 --> 00:04:06,550 So that's what I'm gonna be using moving forward. 65 00:04:06,550 --> 00:04:10,320 All right, we've moved our score into a state object 66 00:04:10,320 --> 00:04:12,400 instead of getting the score from props. 67 00:04:12,400 --> 00:04:15,210 But so far, it doesn't seem to have a benefit. 68 00:04:15,210 --> 00:04:18,860 Up next, you'll learn how to modify state from inside a component, 69 00:04:18,860 --> 00:04:20,600 something you're not able to do with props.