Maintain State in a React Component with the useState Hook

Instructor: [00:00] These flashcards aren't very [00:00] useful because these terms have [00:00] no corresponding definitions and [00:00] we have no way of flipping them [00:12] over. Let's start by giving each [00:00] one of these a definition prop. [00:00] I'm going to come over here. [00:00] We'll just multi-select here. [00:17] We'll give each one a definition. [00:00] We'll give them appropriate [00:25] answers. I'll save that. [00:00] This [00:00] prop isn't being handled by our [00:00] component. Let's go over to [00:00] cardPreview. For one, I'm going [00:00] to start by just replacing the [00:00] term for a second with the [00:00] definition. Then I'm going to [00:00] look in the browser. Just make [00:00] sure the appropriate data is [00:00] making it through, so our [00:00] component is getting that prop. [00:00] Now we can come back and we'll [00:50] make this term again. Now what I [00:00] want to do is I want to have a [00:00] way to swap between the front of [00:00] the card and the back of the [00:54] card. The way we allow a [00:00] component to remember some [00:00] information about itself in [01:03] React is through component state. [00:00] I'm going to come up here to the [00:00] top of my function before the [00:00] return. I'm going to make a call [00:00] to React.useState. I'm going to [00:00] pass it the value true. React. [00:00] useState is going to return two [00:00] values. We're going destructure [00:00] them off of an array. We're [01:21] going to get our value. Our [00:00] initial value is the true that [00:00] we're passing in to useState. [00:00] As that changes over time, we [00:00] need an identifier to hold that [01:26] value. We're going to call that [00:00] isFront. We'll default to [00:00] showing the front of the card. [01:40] The second item in this array [00:00] that gets returned from useState [00:00] is a state updater function for [00:00] this particular value. We're [00:00] going to call that setIsFront. [00:00] Now we have this isFront value [00:00] which is our component state. [00:00] We're going to use that here to [00:00] determine whether we show the [00:00] term or the definition. In here, [00:00] I'm just going to use a ternary. [00:00] We'll do isFront. If it's front, [00:00] we'll show the term. If it's not, [00:00] we'll show the props.definition. [01:56] I'll save that. [00:00] If we take a [00:00] look in the browser, we should [00:00] see that everything is as we [02:10] left it. I'm going to come back. [00:00] I'm going to change the initial [00:00] value for isFront to false. I'll [02:22] save that. I'll switch back. [00:00] We [00:00] should see that we're seeing our [00:00] definitions instead of our terms. [00:00] We know that the state value [02:53] controls this. Now we need a way [00:00] to actually update that state [00:00] value. I'll start by putting [00:00] this back to true so we still [00:00] have the default that we want. [00:00] Then I'm going to define another [00:00] function right inside of this [00:00] function. I'm going to call it [00:00] handleCardFlip. handleCardFlip [00:00] is what we're going to call when [00:00] we click this "Show back" button [00:00] so we can show the back of the [02:43] card. [00:00] For now, I'm just going [00:00] to call setIsFront. I'm going to [00:00] pass it false. This will allow [00:00] us to go from the front of the [00:00] card to the back of the card. In [00:00] order to use this function, we [00:00] need to attach it to the button. [00:00] I'm going to come down here to [00:00] our button for "Show back." I'm [00:00] going to give it an onClick [00:00] handler. For that, I'm just [00:00] going to reference that [00:00] handleCardFlip function. I'll [03:12] save that. [00:00] I'll come back over [00:00] to the browser. We'll see that [00:00] we're looking at our terms again. [00:00] Now when I click "Show back," we [00:00] should see the back of the card. [00:00] That'll work independently for [00:00] each one of these components. [00:00] Clicking the button again isn't [00:00] going to get me back to where I [03:34] need to be. Let's go fix that. [00:00] What we really want is for this [00:00] handleCardFlip function to [00:00] toggle between isFront being [00:00] true and isFront being false so [00:00] that we can go back and forth. [00:00] I'm going to come up here to [00:00] where I'm calling setIsFront. [00:00] This state updater function that [00:00] we get back from useState will [00:00] also take a callback rather than [00:00] just a value. [00:00] What we can do is [00:00] we can get the current value for [00:00] this piece of state and then we [00:00] can return our new value. All I [00:00] have to do here is return the [00:00] negated value of the current [00:00] state value for isFront and this [00:00] should toggle back and forth. [04:18] If I save this, we can go back [00:00] into the browser. We'll see that [00:00] we can click between front and [00:00] back independently for each [00:00] component because each component [00:00] has its own state. [04:22] Now we'll [00:00] come down here. We'll just clean [00:00] this up because we want it to [00:00] show the appropriate terminology. [04:26] We're going to show back in the [00:00] case where isFront is true. [00:00] Where it's false -- that means [00:00] we're looking at the back of the [00:00] card -- we want the label on [00:00] this button to be "Show front." [04:40] I also want to slightly change [00:00] the styling if you're on the [00:00] back of the card. I'm going to [00:00] come up here to where we had [00:00] this class name. Instead of just [00:00] using the string for tile, I'm [00:00] going to use a JavaScript [00:00] expression. [00:00] I'm going to use [00:00] backtick so we can use string [00:00] interpolation. I'm going to [00:00] surround this with backticks. We [00:00] always want the tile class [00:00] applied. Then we want to toggle [00:00] the back class on and off based [00:00] on the value of isFront. [05:09] I'm [00:00] going to use the dollar curly [00:00] braces to switch between string [00:00] and JavaScript expressions. [00:00] We'll do a ternary based on [05:20] isFront. If it's the front, [00:00] we'll just make this an empty [00:00] string. If it's not, we're going [00:00] to also append this back class [00:00] to this div's class name. I'm [05:34] going to save this. [00:00] Now I'll go [00:00] into the browser. We'll show [00:00] back. We'll see that the [00:00] background color changes [00:00] slightly. We're seeing our [00:00] definition. When we show front, [00:00] we'll see our term. We'll also [00:00] notice that the button label is [00:00] changing along with those other [00:00] two values.