Bootstrap a new React project with npx and create-react-app

Render a UI with JSX in a React Function Component

Apply Styles to a UI in JSX

Create a Reusable React Component

Maintain State in a React Component with the useState Hook

Test Component Rendering with Jest and Testing Library

Test Component Interactions with Jest and Testing Library

Load Data from an API with React.useEffect

Display UI for List Items in JSX with Map

Setup an API Proxy in Create React App

Refactor API Calls into a Service Function

Mock Modules in a React Component Test

Remove Items in a List Without Mutating the Source Array

Create a Form with Controlled Inputs in React

Handle Form Submissions in React

Refactor React Components with Prop Spreading and Destructuring

Conditionally Render Components in React

Make a React Form Component that Handles Inserts and Updates

Avoid Duplicate id Attributes when Reusing Form Components

Support Multiple Views in a Single Page Application with @reach/router

Create a React Component Using the Class Syntax

Render UI Based on Props and State in a Class Component

Manage State and Respond to User Events in a Class Component 

Cycle Through an Array of Values with the Modulus Operator

Build a React App with the Hooks API

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.

https://app.egghead.io/api/v1/lessons/react-maintain-state-in-a-react-component-with-the-usestate-hook/subtitles

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.


Maintain State in a React Component with the useState Hook

Share this video with your friends

Course

Build a React App with the Hooks API