<ReactFormUpdate>

Renders an update button that calls the update method on click. The button is automatically visible only in update mode (when editing an existing item) and hidden in create mode (when creating a new item).

<ReactForm>
  {({ context }) => (
    <ReactFormUpdate>
      {({ updateItem, isUpdating, isReading, isLoading }) => (
        <button onClick={updateItem} disabled={isLoading}>
          {isUpdating ? "Updating..." : "Update"}
        </button>
      )}
    </ReactFormUpdate>
  )}
</ReactForm>

Render Props

updateItem

• Type: Function

Wrapper function for calling the update method. Call this function when the button is clicked.

isUpdating

• Type: Boolean

true while the update operation is in progress.

isReading

• Type: Boolean

true while the read operation is in progress (when loading existing data).

isLoading

• Type: Boolean

true when any async operation is in progress (reading, creating, updating, deleting, or archiving).

Default Behavior

If no render prop is provided, <ReactFormUpdate> renders a default button with loading states.

// Default button
<ReactFormUpdate />

// Custom button
<ReactFormUpdate>
  {({ updateItem, isUpdating, isLoading }) => (
    <button
      onClick={updateItem}
      disabled={isLoading}
      className="btn-primary"
    >
      {isUpdating ? "Saving..." : "Save Changes"}
    </button>
  )}
</ReactFormUpdate>

Example

<ReactForm schema={schema} update={update} itemId={itemId}>
  {({ context }) => (
    <>
      <ReactFormFields>
        {/* Fields */}
      </ReactFormFields>
      
      <ReactFormUpdate>
        {({ updateItem, isUpdating, isLoading }) => (
          <div className="form-actions">
            <button
              onClick={updateItem}
              disabled={isLoading}
              className="btn btn-primary"
            >
              {isUpdating ? (
                <>
                  <Spinner /> Updating...
                </>
              ) : (
                "Update"
              )}
            </button>
          </div>
        )}
      </ReactFormUpdate>
    </>
  )}
</ReactForm>