Create a Stateful Component

In this video, we're going to create a stateful component by first defining 0:00 an initial state inside the counter class. 0:04 You'll learn that in React state changes over time, 0:07 usually in response to users action. 0:11 So what part of the counter will change when users interact with it? 0:13 The score will increase or decrease depending on which button they click. 0:18 Score is our state. 0:22 So now let's go into our Counter component and start creating state. 0:24 Since state is an object, you create and 0:28 initialize state within a class inside the constructor method. 0:31 So first, I'll set up a constructor. 0:35 Again, if you're not familiar with classes and constructor methods, be sure to review 0:38 the Tree House videos posted in the teacher's notes with this video. 0:42 Inside the constructor, I'll call super in 0:46 order to call the constructor of the component class that we're extending. 0:49 And this needs to be done before we can use the this keyword 0:55 within the constructor. 0:58 Then to initialize our component state, 1:00 write this.state and set it equal to an object. 1:03 You must name this object state otherwise this will not work. 1:09 Since state is data that changes over time, we first need to set an initial 1:14 state or the state of the component when it first bounce. 1:19 The state in our counter is going to be the score we want to display for 1:23 each player. 1:28 I'll call the state score and set it to 0 by default. 1:29 Now that we've initialized state, over end React dev tools, 1:33 select a counter component inside a player component. 1:37 And you should see a new property called State up here in the right pane. 1:41 We see the course state and it's value is 0. 1:45 Next, let's remove the score prop being passed to 1:49 the counter and player components. 1:54 Because Counter is now maintaining its own score state, 1:58 it doesn't need the score information from its parent player component. 2:01 You access state in a similar way to how you access props. 2:06 In the Counter components render method, 2:11 replace this.props.score with this.state.score. 2:14 You can think of the render method in a class component 2:18 as being a function of not just props, but props and state. 2:22 In other words, if either props or state changes, 2:26 React executes the render method to update what gets displayed to the user. 2:30 Now once we refresh our app, 2:36 we see that all the players scores are set to the initial state of 0. 2:38 We can even change the score state of a counter component 2:43 instance in React Dev Tools and see the score change on the page. 2:48 Great, so you've just built your first stateful react component. 2:53 Before we move on, 2:57 I want to teach you a second way you can initialize state inside a React component. 2:59 A shortcut, 3:05 you'll often see state initialized inside a class constructor like this. 3:06 But you can also initialize state directly inside the class definition, 3:11 using a class property. 3:16 You omit the constructor method and super all together, and 3:18 reference the state property directly. 3:22 You don't need to write it as this.state, just state, and 3:26 set it equal to the object. 3:30 This class properties syntax is a feature of JavaScript that's currently not 3:35 supported in all browsers. 3:39 Since we're using the Babel transpiler in our app, 3:40 we don't have to worry about browser's support. 3:44 Babel will transpile our code and add a constructor for us behind the scenes. 3:47 The way you initialize state is up to you. 3:53 I prefer the class property syntax because it allows for a cleaner class component 3:55 and I don't have to remember to setup a constructor and call super. 4:00 So that's what I'm gonna be using moving forward. 4:03 All right, we've moved our score into a state object 4:06 instead of getting the score from props. 4:10 But so far, it doesn't seem to have a benefit. 4:12 Up next, you'll learn how to modify state from inside a component, 4:15 something you're not able to do with props. 4:18