CakePHP Interact

Nested islands ​

Nested islands keep their own state, requests, and input drafts when a parent island refreshes.

Rendering children ​

For a listing whose viewData() supplies $articles:

php
<?php foreach ($articles as $article): ?>
    <?= $this->Interact->render(
        'Article/Editor',
        props: ['articleId' => (int)$article->id],
        key: 'article-' . (string)$article->id,
    ) ?>
<?php endforeach; ?>

The child declares articleId with #[Prop]. Article/Editor resolves to App\Island\Article\EditorIsland on demand.

Keys ​

Keys must be unique among siblings and stable between renders. Use record IDs, rather than positions in a result list. A matching child keeps its draft and browser instance when the parent refreshes.

Changing a child's island name or props requires a new key. Include a revision when you intentionally want a fresh mount. Removing a child disposes it; showing it again creates a new instance.

Events ​

Use events to refresh a parent or sibling after a child saves. $server always resolves to the nearest island, including inside nested markup.

Local Alpine state ​

Local x-data survives ordinary updates while its element is preserved. Use it for open panels and other browser-only UI preferences. Store PHP-interactive values in declared properties instead.