Trigger Side Effects using Zag.js computed and watch Properties

Segun Adebayo
InstructorSegun Adebayo
Share this video with your friends

Social Share Links

Send Tweet
Published a year ago
Updated a year ago

When the pin input values are full we will want to do something with those values such as sending an HTTP request.

To do this we'll implement a callback in context that will get invoked when all the values are computed. We'll do this by creating a computed property that returns true when all values in context are full. From there we will watch that computed property to invoke our callback.

Instructor: [0:00] Another useful feature we can add to this component is to know when the value is completed. If I type one, two, three, four. At that point, we want to know that all the input fields are complete and we can maybe send the value to the server or post the values to a form, for example.

[0:20] Let's see how we can add this. If we take a look at the context, we see that we have the value here which could be a string array.

[0:29] Now, one thing that would be helpful is to have another view of this value that somehow tells us when all of those values in that array are filled which means they are not actually empty strings. Fortunately, JS allows us to create computed properties of the context.

[0:46] Here I'm going to add a new key called computed and in the context, I'll define a read-only field called is completed and make that a Boolean. This field lets us know when the values and all the values in that array is filled. Here, to write the implementation of that, it's going to give us access to is completed and we can write the expression here that basically checks if the context.value, every field in there actually has a value which means every field is not empty.

[1:25] This is the computed property that allows us to know when all values are filled. Just as we said in the previous lesson, we can use the watch to actually listen to when context properties change. In this case, we can listen to when the value is completed. We want to now instantly create some uncomplete handler.

[1:45] We're just going to put here invoke uncomplete and we'll switch back again to the machine type, the context type here and define a new type called uncomplete. This is going to be a callback that returns us the value of all the fields and just returns the void. Literally, we can invoke this callback within the watch.

[2:10] Now that that is defined, let's create a dummy implementation of that in the context. We have uncomplete here. For now we do a console.log of the value. Then, finally, we'll write the implementation of invoke uncomplete.

[2:26] I'll scroll all the way down to the actions and write the implementation for invoke uncomplete. What this does is to check if...we're going to do a quick check to see if the value is completed. If it's not completed, we just do an L to return.

[2:42] Because we actually invoke the uncomplete function passing in context.value. Because we are working within, most of these values are wrapped within boxes. We need to convert that back into an array. We switch this and say array.from context.value.

[3:03] This way when all values within the context are field, when the user actually puts something in every single field, it switches to 1 and that invokes this callback. Let's test this out to see how it works. I'm going to open a console. Let's switch to inspect, console.

[3:22] Then we type in here one, two, three, four. There you go, we see that the log gets fired and it has an array here of one, two, three and four. I'm going to reload again, copy some values, some rough text and then use the paste approach as well.

[3:40] If I paste all values into the field, again, you see that the completion callback is called with ENTE as we copied. So that is awesome. Now, we can use this value and send this value through a post request or to some server for the pin code that has just been entered.

~ 46 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today