# Update components

Stratox provides three key mechanisms to manage data and interactions within your application: **props**, **states**, and the **dispatcher**. While they share similarities, each serves a distinct purpose:

* [**Props**:](#updating-props) Data passed directly to views or components. Props are isolated to their respective view instances, allowing you to update specific parts of a page without affecting the entire layout.
* [**States**:](#updating-states) Globally accessible within the active route and controller method. Updating a state refreshes the entire page, including all nested components, making it suitable for broader application-wide changes.
* [**Dispatcher**:](#dispatching-requests) Handles communication between routes and controller methods. It facilitates making HTTP requests (e.g., GET, POST, PUT, DELETE) and navigating between routes while passing data seamlessly.

Understanding these differences helps you utilize each tool effectively, depending on the scope and requirements of your application.

***

### Updating Props

Props are objects and data passed to your views/components, serving as the primary mechanism for passing and updating data. Unlike global variables, props are contained within a view instance, allowing you to dynamically update parts of your page without reloading the entire page.

**Example: Updating Props**

```javascript
export default function TextComponent({ props, view, update, context }) {

  // Set default values for props
  context.setDefault({ updatedOnce: false });

  // Define click event to update props
  const clickEvent = this.bind((props, view, item, event) => {
    props.title = 'Headline updated in click event';
  });

  // Update props dynamically after a timeout
  if (!props.updatedOnce) setTimeout(() => {
    props.updatedOnce = true;
    update({ title: "Updated through Timeout" });
    //update(string|object|function|StratoxItem, object|function|StratoxItem);
  }, 2000);

  return `
    <article class="relative card-1 border-bottom ingress">
      <div class="wrapper md">
        <h1 class="headline-1">${props.title}</h1>
        <p>${props.description}</p>
        <button class="button bg-primary" onclick="${clickEvent}">Change headline</button>
      </div>
    </article>
  `;
}
```

***

### Updating States

States are global but scoped to the active route and controller function method. You can set, update, and access states across all nested components. When a state is updated, it refreshes the entire page and its nested components.

**Example: Updating States**

```javascript
export default function TextComponent({ props, state }) {

  // Set default values for the state
  state.setDefault({ title: "Hello world" });

  // Dynamically update the state after a timeout
  if (!props.updatedOnce) setTimeout(() => {
    state.update("title", "Updated through Timeout");
    //state.update(string|object, mixed);
  }, 2000);

  return `
    <article class="relative card-1 border-bottom ingress">
      <div class="wrapper md">
        <h1 class="headline-1">${state.get('title')}</h1>
        <p>${props.description}</p>
      </div>
    </article>
  `;
}
```

***

### Dispatching Requests

The dispatcher allows you to manage requests (GET, POST, PUT, DELETE) and pass data between routers and controller methods. If Fetch/Ajax config data is defined in your main config or route, it will trigger automatically.

**Example: Dispatching Requests**

```javascript
export default function TextComponent({ props, dispatch, request, http }) {

  // Navigate to a new route with updated data
  if (!request.get.get("title")) setTimeout(() => {
    dispatch.navigateTo("#start", { title: "<em>Headline updated</em>" });
  }, 2000);

  return `
    <article class="relative card-1 border-bottom ingress">
      <div class="wrapper md">
        <h1 class="headline-1">${{request.get.get("title") ?? "Hello World"}}</h1>
        <p>${props.description}</p>
      </div>
    </article>
  `;
}
```

***

By leveraging props, states, and the dispatcher effectively, you can build dynamic, responsive, and maintainable applications in Stratox. These tools offer flexibility and power to update views and manage application data seamlessly.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://stratox.wazabii.se/views-components/update-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.