All language subtitles for 019 Aliases_en

In this lecture, we're going to add an alias for our stage properties.

Aliases can be a great way to rename state properties for a component with dozens of properties and

methods.

There are two problems you may come across when working with large components.

First, you may have properties with conflicting names.

Secondly, the names from the store may not be descriptive enough for a component.

For example, let's look at the properties name from the modal store.

It's called is open.

This name isn't very descriptive.

What if we had a dropdown that's tolerable?

Does this property affect the modal or dropdown?

We wouldn't know by looking at the property.

For these reasons you can try renaming the property.

However, renaming a state property from the store may not always be practical.

If your state property is being used across several components, those components would need to be updated.

Rather than going on a wild goose chase, you can rename a state property from within a component by

using an alias.

Let's look at an example.

In the off component we should rename the is open state property.

Previously we mapped the state into the component by using the map writable state function.

The second argument accepts an array of state properties to map.

Let's replace this argument with an object.

Inside this object, the property name will represent the name of the state property.

Let's rename the is open property to modal visibility.

Next, the value should reference the name of the state property to rename let's set this property to

is open.

By using an alias.

We do not need to modify the store, nor do we need to update components outside of the OP component.

Only the OP component is affected by the renaming.

We're not finished yet.

Scroll to the close button on this button.

Change the expression to use the modal visibility alias.

We can continue using the state property as we did before.

Peneha is smart enough to update the appropriate state property from the store.

Let's visit the browser one last time to check if everything is functioning.

Open and close the modal.

The modal will toggle its appearance without a problem.

Technically, we don't have a property called modal visibility in our state.

Regardless, we can still use an alias.

This alias can be useful in case you have conflicting names in your application or you would like to

shorten things of it.

For this course we won't need to use them.

Switching back to the editor.

Let's continue moving forward.

The modal is completely toggle able.

The last step is to work on the tabs in the modal.

At the moment both forms are appearing.

We should toggle the visibility of both forms based on the tabs.

We'll tackle this step in the next lecture.