Manage State and Respond to User Events in a Class Component
Before the hooks API was introduced, class components were the only way to create stateful components. With countless class-based React components in the wild, you'll need to know how to support them, even if other parts of your code base use hooks. In this lesson, we'll handle user events and update the component's state in response to those events with React's setState method.
Andy Van Slaars: [0:00] Right now, this UI is rendering based on some passed-in props and some internal state, but we're not actually responding to any events. If I click the show back button here, nothing's going to happen.
[0:10] Let's go back to our component. We'll add a little bit of state and some event handling to flip this card and show the back. Let's start by updating our state object and creating another key. We're going to call this one isFront. We're going to set that initially to true.
[0:25] Now let's go down into our render method. I'm going to add that to the destructuring here. We'll have currentIndex and isFront. Where we destructure cards, I'm going to add definition to that destructuring. We'll do the same thing here. We'll give it a default value of an empty string.
[0:41] Now let's go down here. Where we're showing the term, we're going to do this based on that isFront property. I'll use a ternary. We'll add, "isFront?" if it is, we'll show the term. Otherwise, we'll show the definition.
[0:54] At this point, it should still show the term because our default state value is true. We'll save this. We'll look in the browser. Once that API call comes back, we'll see that our refactor hasn't broken anything.
[1:06] Let's go back here. Just to test this out, let's change this isFront default value to false. We'll save that. Back to the browser. When it reloads, we'll see the back of that card. Let's set this back to true.
[1:20] Now we need a way to update the state value. I'm going to come down here. I'm going to define a new property on this class. I'm going call it handleCardFlip. I'm going to set this to equal an arrow function.
[1:33] Now we want to update our state. In a class component, we reference our state through this.state. We reference our state updater function through this.setState. We're going to use this.setState. Then we want to pass it our state update.
[1:47] There's two signatures for this. We could pass this an object with whatever keys and their corresponding values we want to replace on our state. That'll get merged into our existing state, so we don't have to worry about the entire state.
[1:59] Or we can pass it a callback function where it gets a reference to the existing state. Then we can return that subset of state we want to update. We'll use that in this case because our new state is going to be based on our existing state. We always want to do it with this callback signature.
[2:15] I'm going to pass back an object with the isFront key. I'm going to set that to the opposite of whatever isFront value I get back. This is just going to toggle between true and false. Now that we have this defined, let's wire it up to our UI.
[2:31] I'm going to scroll down to render here. I'm going to find my show back button. I want to give this an onClick. The onClick here is going to reference this.handleCardFlip.
[2:44] This will call that function that we just defined, which internally will use this.setState to toggle our isFront between true and false. We're already rendering our term or our definition based on that value. Let's save this. Let's look at it in a browser.
[2:59] Now clicking this button should flip us between the front and the back views of the card. The text for the button isn't changing. Let's go back and fix that. I'm going to come down here. I'm going to put this in an expression and quote it.
[3:12] I'm just going to have another ternary based on isFront. In the case where it's isFront, our text will be "Show back." Otherwise, it'll be "Show front." With that done, let's verify in the browser that everything still works. We'll see that our card just flipped and our button text has updated to stay in sync with that piece of state.