Check out a free preview of the full State Modeling in React with XState course
The "Context Exercise" Lesson is part of the full, State Modeling in React with XState course featured in this preview video. Here's what you'd learn in this lesson:
Students are instructed to use context property to hold the extended state and the assign method to update context property in an action.
Transcript from the "Context Exercise" Lesson
[00:00:00]
>> All right, so let's start exercise 2, which is on context. We're going to be using context to hold some extended states within our timer application. Now, if we go back to complete, you could sort of see where that extended state comes in handy. We want to keep this value over here, which is the current time or the time that has elapsed basically the time remaining.
[00:00:32]
But we also wants to keep what the original time was. So, see we have duration, which could be something like 60 seconds because this is a minute timer elapsed, which is how much time has elapsed in the interval. This interval is mainly for counting down and we don't have to worry about that yet.
[00:00:56]
Instead, we're just going to be worrying about duration elapse, but also add that interval to the state context object. So, in this exercise, we go to number 2. You'll also notice that there's a few extra buttons too. So we have this plus 1 and so clicking that button should assign 1 minutes to this interval.
[00:01:25]
And so reset should also take the elapsed time back to 0. And so that's what the reset functionality is for. So, basically, we are modifying context in this timer app and follow the goals over here. And yeah, good luck.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops