1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Maintain State in a React Component with the useState Hook

    Andy Van SlaarsAndy Van Slaars
    reactReact

    To build interactive applications, we need our components to respond to events and to "remember" things about their current "state". With component state, we give our components internal data and the ability to control the value of that data over time. In this lesson, we'll add some internal state to a component and change that state in response to user input.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

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