Sharing state between framework islands in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the state management function in Astro.

Astro

import { [1] } from 'astro/client';

Drag options to blanks, or click blank then click option'

AuseEffect

BuseState

CuseSignal

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using React hooks like useState which are not available in Astro islands.

Confusing useEffect with state creation.

The useSignal function is used in Astro to create reactive state that can be shared between framework islands.

2fill in blank

medium

Complete the code to create a shared signal named 'count' with initial value 0.

Astro

const count = [1](0);

Drag options to blanks, or click blank then click option'

AuseSignal

BuseState

CcreateSignal

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using React's createSignal which is not available in Astro.

Using useState which is React-specific.

useSignal(0) creates a reactive signal with initial value 0 in Astro.

3fill in blank

hard

Fix the error in passing the shared signal as a prop to a child island.

Astro

<ChildIsland count=[1] />

Drag options to blanks, or click blank then click option'

Acount

Bcount.value

Ccount()

Dcount.current

Attempts:

3 left

💡 Hint

Common Mistakes

Passing count.value which is undefined in Astro signals.

Calling count() which is not a function in Astro signals.

When passing a signal as a prop in Astro, pass the signal object itself, not its value.

4fill in blank

hard

Fill both blanks to update the shared signal value inside a child island event handler.

Astro

function increment() {
  [1].value = [2].value + 1;
}

Drag options to blanks, or click blank then click option'

Aprops.count

Bcount

Cprops.count.value

Dcount.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using a local variable 'count' instead of the prop.

Trying to call the signal as a function.

Inside the child island, the shared signal is accessed via props.count. To update, assign to props.count.value.

5fill in blank

hard

Fill all three blanks to create a shared signal, pass it to a child island, and update it on a button click.

Astro

const [1] = [2](0);

return <ChildIsland count=[3] />;

Drag options to blanks, or click blank then click option'

Acount

BuseSignal

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of useSignal.

Passing the signal value instead of the signal itself.

First, create the signal with useSignal and name it count. Then pass count as a prop to the child island.