How to dynamically change text using variables

This article explains how to dynamically change text using variables in Peaka. We'll illustrate this with an example where we change label text based on the value entered in an input component.

Dynamic Text Change Example

Let's go through the process step by step:

1. Components setup: We have an input component and a label component, as shown in the image below:

2. Select the page variable: To change the value of the label dynamically, we need to select a page variable to obtain the value entered in the input component. If you wish to use an app variable instead, simply choose "app" instead of "page."

3. Preview your project: Before seeing the dynamic change in action, click the preview button. If you're not familiar with the preview feature, you can refer to the article on Preview your project for more information.

4. See the dynamic text change: With everything set up, you can now experience the dynamic text change. When you modify the input value, the content of the label will automatically get updated, as demonstrated in the image below:

That's it! You've successfully learned how you can dynamically change text by utilizing variables in Peaka. This capability allows you to create responsive and interactive components that adapt to user inputs and enhance the overall user experience.