Original subtitles

In this lecture, we're going to start working with the state to accomplish our goal of toggling the

modal we've already taken care of, breaking the template into components.

This breakdown reduced clutter in our application.

The next step is to toggle the modal.

Here's how we're going to approach this.

We'll need to store value that will either be true or false.

The modal is visible.

Appearance will depend on that value.

This means that we'll have to keep track of it.

We'll need a way to toggle the value.

We can store the value in a component as a data property, but I believe storing it in the state is

a better approach.

It'll allow for other components to toggle the value.

Peneha was created for situations like this.

It can contain data that will be available to all components.

Any updates to the data are reflected in all components.

This centralized state makes it ideal for holding the flag value of the modal.

First, we'll create the value in the stores directory.

Create a file called Modal JS.

At the top of the file.

Import the defined store function from the package.

The defined store function will help us create a new store.

We can think of the store as an object that will track the data stored inside it.

The store must be exported from the file, otherwise our components will not have access to the data.

Export the defined store function from the default namespace.

This function has to arguments.

The first argument is an ID for the store.

It's completely normal to have multiple stores.

Technically, you can create a single store for an entire application.

However, it's considered good practice to split your state into multiple stores for easier manageability.

The ID will allow us to identify the store.

Let's set the ID to Modal.

Next pass in an object.

In this object we can add various properties for interacting with our state.

Before we define functions, let's add the state property.

The value for this property will be an arrow function that returns an object.

Inside the state object create a property called is open with an initial value of false.

The state object is where we can add our data.

Any data that you want globally available to other components should be defined here.

The data is ready.

Let's learn how to access it from a component.

Open the header component file in your editor.

Inside the header component, we have a navigation menu.

It's an unordered list with tailwind classes above the menu.

There's a comment that says Primary navigation.

We're going to focus our attention on the link that says log and register.

If the user clicks, this link will want to display the modal.

The model's appearance will depend on the value of the is open stage property.

If it's true, the modal will be visible.

If it's false, it'll be hidden.

Essentially, clicking this link should toggle the value.

We'll attach an event listener to the anchor element.

We're going to listen for the Click Event with the Prevent Modifier.

We're going to set the value to toggle off modal.

We won't pass anything to the function.

The function doesn't exist, so we'll define it next.

Below in the script block set the name to header and create the methods object.

If the script block does not exist.

Added in.

Inside the methods object will define the toggle off modal function.

This function will be responsible for toggling the boolean value we created in the state.

The question is how do we access the state?

Penina has a function for merging the store into our components at the top of the scripts.

BLOCK import a function called map stores from the Peneha package.

This function will merge the store into the component, thus giving us access to the state.

Before running this function, we're going to need the store.

Import the store with the following name.

Use modal store.

It's common practice to follow a specific naming convention for your stores.

The name must always be prefixed with the word use and affixed with the word store.

This naming convention helps developers understand that we're using the store in the component.

It's optional, but recommended.

We're going to follow this practice for the rest of the course and the components options.

Add the computed object in this object.

Call the map stores function with the spread operator.

This function accepts the store.

Let's pass in the use modal store object.

Back in the toggle off modal function the stores now accessible through the this dot modal store object.

The map store's function will create an object with the name of the ID.

In our case, the ID of the store was set to modal.

You can refer to the modal JS file for the name of the ID.

The word store gets appended to the name.

Therefore, if we had a store called User, the object would be called user store.

Inside the function, we'll want to set the current value to its opposite.

This is a simple trick to toggle boolean values to verify if the value gets toggled, we're going to

log the value afterward.

Let's check if everything is working.

Opening the browser will open the developer tools and switch to the console panel.

Then I'll click the log in register link.

After doing so numerous times, we can see the value is changing.

We have a way to update the state.

We are allowed to access the state through the store object.

We can even change the value if we'd like.

Great.

We've successfully created our first state property in the next lecture.

Let's begin applying this state to the modal.