Action return data in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to return data from a Svelte action.

Svelte

function myAction(node) {
  return {
    [1]: { message: 'Hello' }
  };
}

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

Adata

Bupdate

Cdestroy

Dinit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'update' or 'destroy' instead of 'data' to return data.

Not returning an object at all.

The data property in the return object of a Svelte action is used to expose data to the component.

2fill in blank

medium

Complete the code to access the returned data from a Svelte action.

Svelte

<div use:myAction let:data>
  <p>[1]</p>
</div>

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

A{message}

B{data}

C{myAction.data}

D{data.message}

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access data without using let:data.

Using incorrect variable names.

Using let:data exposes the data returned by the action, and {data.message} accesses the message property.

3fill in blank

hard

Fix the error in the action return to properly update data.

Svelte

function myAction(node) {
  return {
    [1]() {
      return { message: 'Updated' };
    }
  };
}

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

Aupdate

Bdata

Cdestroy

Dinit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'data' as a function instead of a property.

Not returning data from the update function.

The update method is called when the action parameters change and can return new data.

4fill in blank

hard

Fill both blanks to return data and define a destroy method in a Svelte action.

Svelte

function myAction(node) {
  return {
    [1]: { count: 0 },
    [2]() {
      console.log('Cleaning up');
    }
  };
}

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

Adata

Bupdate

Cdestroy

Dinit

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up update and destroy.

Not returning data properly.

The data property returns data, and destroy is a cleanup method called when the action is removed.

5fill in blank

hard

Fill all three blanks to return data, update it, and destroy the action properly.

Svelte

function myAction(node) {
  let count = 0;
  return {
    [1]: { count },
    [2]() {
      count += 1;
      return { count };
    },
    [3]() {
      console.log('Action destroyed');
    }
  };
}

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

Adata

Bupdate

Cdestroy

Dinit

Attempts:

3 left

💡 Hint

Common Mistakes

Not returning updated data from update.

Forgetting to define destroy for cleanup.

data returns initial data, update updates and returns new data, and destroy cleans up when the action is removed.