Introducing Pattern-Matching Callbacks

Pattern-matching callbacks will allow us to take our apps to a new level of interactivity and power. The most important feature of this capability is that it allows us to handle the interactivity of components that didn’t exist before. As we’ve done so far, when we allowed users to create new charts by clicking a button, those components didn’t exist before in the app. The more interesting thing is that the callback function that handles them all is as simple as any other callback that takes values from a drop-down and produces a chart. The trick is in slightly changing the id attribute of our components.

So far, we have set the id attributes as strings, and the only requirement is that they should be unique. We’ll now introduce a new way of creating this attribute, which is by using dictionaries. Let’s first take a look at the end goal, then modify the layout, the callbacks, and finally, discuss the new way to handle the id property. The illustration below shows what our app will look like: