@ea-lab/reactive-json-docs/public/rjbuild/docs/core/reaction/setData.yaml

Complete documentation for Reactive-JSON - Components, examples and LLM-parsable guides

renderView:
  - type: Markdown
    content: |
      # Reaction: setData

      The `setData` reaction updates the data at a specific location in the global data context. It is one of the most fundamental reactions for managing state and making applications interactive. It can be used to set simple values, objects, or the result of a template evaluation.

      ## Properties

  - type: DefinitionList
    content:
      - term:
          code: path
          after: "(string, required)"
        details:
          type: Markdown
          content: "The target location in the data context where the value will be set. It supports `~.` notation for relative paths"
      - term:
          code: value
          after: "(any, required)"
        details:
          type: Markdown
          content: "The value to set at the specified path. This value is evaluated, so it can be a literal, a path to other data, or a template string"
      - term:
          code: conditionalProperties
          after: "(optional)"
        details:
          type: Markdown
          content: "Like all reactions, `setData` supports conditional execution using `when`, `is`, `isNot`, `isEmpty`, `contains`, `>`, `<`, `>=`, `<=`, `andConditions`, `orConditions`"

  - type: Markdown
    content: |
      ## Behavior
      - When triggered by the specified event (`on`), `setData` evaluates the `value` property within the current context.
      - It then updates the data at the location specified by `path`.
      - If the `value` is an object or an array, it is deep-cloned before being set to prevent shared-state mutations.
      - If the `path` does not exist, it will be created.
      - If conditions are specified, the reaction only executes when those conditions evaluate to true.

      ### Limitations
      - The `path` and `value` properties are mandatory for the reaction to have an effect.
      - When conditions are not met, the reaction is skipped entirely.

  - type: RjBuildDescriber
    title: "Basic Usage"
    description: "This example demonstrates how to use `setData` to change a text value when a button is clicked."
    toDescribe:
      renderView:
        - type: div
          content: ["Current value: ", ~.myValue]
        - type: button
          content: "Set value to 'Hello World'"
          actions:
            - what: setData
              on: click
              path: ~.myValue
              value: "Hello World"
        - type: button
          content: "Set value to 'Another value'"
          attributes:
            style:
              marginLeft: 5px
          actions:
            - what: setData
              on: click
              path: ~.myValue
              value: "Another value"
      data:
        myValue: "initial value"

  - type: RjBuildDescriber
    title: "Conditional Usage"
    description: "This example shows how to use conditions with `setData` to only execute when certain criteria are met."
    toDescribe:
      renderView:
        - type: TextField
          dataLocation: ~.username
          label: "Username:"
          placeholder: "Enter username"
        - type: button
          content: "Set Welcome Message"
          actions:
            - what: setData
              on: click
              path: ~.message
              value: ["Welcome, ", ~.username, "!"]
              when: ~.username
              isNotEmpty:
            - what: setData
              on: click
              path: ~.message
              value: "Please enter a username first"
              when: ~.username
              isEmpty: true
        - type: div
          content: ~.message
          actions:
            - what: hide
              when: ~.message
              isEmpty: true
      data:
        username: ""
        message: ""