JSX in Vue components - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple Vue component using JSX that renders a <div> with text.

Vue

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return () => <[1]>Hello Vue JSX!</[1]>;
  }
});

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

Adiv

Bp

Csection

Dspan

Attempts:

3 left

💡 Hint

Common Mistakes

Using inline tags like when a block container is expected.

Forgetting to close the JSX tag properly.

The JSX code returns a div element with the text inside. Using div is correct here.

2fill in blank

medium

Complete the code to define a JSX render function that returns a button with a click event handler.

Vue

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const handleClick = () => alert('Clicked!');
    return () => <button on[1]={handleClick}>Click me</button>;
  }
});

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

AonClick

Bclick

CClick

Donclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' (lowercase), forming invalid 'onclick'.

Using 'onClick' or 'onclick', forming malformed attributes.

In Vue JSX, event handlers use camelCase after on, like onClick. Fill Click to form onClick={handleClick}.

3fill in blank

hard

Fix the error in the JSX code that tries to render a list of items inside a Vue component.

Vue

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const items = ['apple', 'banana', 'cherry'];
    return () => (
      <ul>
        {items.[1](item => <li key={item}>{item}</li>)}
      </ul>
    );
  }
});

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

Areduce

BforEach

Cfilter

Dmap

Attempts:

3 left

💡 Hint

Common Mistakes

Using forEach which returns undefined and breaks rendering.

Using filter which only selects items but does not transform.

The map method transforms each item into a JSX element. Using forEach or others won't return the new array needed for rendering.

4fill in blank

hard

Fill both blanks to create a reactive state and update it on button click in a Vue JSX component.

Vue

import { defineComponent, [1] } from 'vue';

export default defineComponent({
  setup() {
    const count = [2](0);
    const increment = () => count.value++;
    return () => <button onClick={increment}>Count: {count.value}</button>;
  }
});

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

Aref

Breactive

CuseState

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' which is for objects, not primitives.

Using React's 'useState' which is not in Vue.

Vue uses ref to create a reactive primitive value. Importing ref and calling ref(0) creates a reactive count.

5fill in blank

hard

Fill all three blanks to create a Vue JSX component that conditionally renders text based on a signal.

Vue

import { defineComponent, [1] } from 'vue';

export default defineComponent({
  setup() {
    const isVisible = [2](true);
    return () => (
      <div>
        {isVisible.value ? <p>[3]</p> : null}
      </div>
    );
  }
});

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

Aref

Breactive

CVisible!

DHidden!

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' instead of 'ref' for a boolean.

Putting raw text without quotes inside JSX.

We import and use ref to create a reactive boolean. The JSX conditionally renders the text Visible! when isVisible.value is true.