Making OWL components reactive

OWL is a powerful framework and supports auto updates for the UI based on hooks. With update hooks, a component's UI will be automatically updated when the internal state of the component is changed. In this recipe, we will update the message in the component based on user actions.

Getting ready

For this recipe, we will continue using the my_library module from the previous recipe.

How to do it...

In this recipe, we will add arrows around the text in the component. Upon clicking the arrow, we will change the message. Perform the following steps to make the OWL component reactive:

1. Update the XML template of the component. Add two buttons with an event directive around the text. Also retrieve the message dynamically from the list:

   static template = xml`
       <div class="bg-info text-center p-2">
           <i class="fa fa-arrow-left p-1"
    &...