JSX in Vue components - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Vue JSX component render?

Consider this Vue 3 component using JSX syntax. What will it render in the browser?

Vue

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const message = 'Hello from JSX!';
    return () => <div><h1>{message}</h1><p>{message.length}</p></div>;
  }
});

A <div><h1>Hello from JSX!</h1><p>15</p></div>

B <div><h1>{message}</h1><p>{message.length}</p></div>

C <div><h1>Hello from JSX!</h1><p>Hello from JSX!</p></div>

D <div><h1>Hello from JSX!</h1><p>16</p></div>

💡 Hint

Remember JSX expressions inside curly braces evaluate JavaScript expressions.

The JSX renders the string stored in 'message' inside the

. The

shows the length of that string, which is 16 characters.

📝 Syntax

intermediate

Which JSX syntax is correct for binding a click event in Vue?

In Vue JSX, how do you correctly bind a click event handler named 'handleClick' to a button element?

A <button onClick={handleClick}>Click me</button>

B <button v-on:click={handleClick}>Click me</button>

C <button onClick:click={handleClick}>Click me</button>

D <button onClick={() => handleClick()}>Click me</button>

💡 Hint

Vue JSX uses camelCase event names similar to React.

In Vue JSX, event handlers use camelCase like 'onClick'. The value is a function reference or inline function. Option A correctly binds the handler.

🔧 Debug

advanced

Why does this Vue JSX component throw an error?

This Vue component using JSX throws an error when rendering. What is the cause?

Vue

import { defineComponent, ref } from 'vue';

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

A Using 'count++' directly in onClick causes a runtime error because count is a ref object, not a number.

B The JSX syntax is invalid because onClick must be lowercase 'onclick'.

C The component is missing a return statement inside setup.

D The count.value should be updated using count.value++ inside the onClick handler function.

💡 Hint

Remember that Vue refs are objects and you must update their .value property.

The onClick handler uses 'count++' which tries to increment the ref object itself, causing an error. The correct way is to update count.value inside a function.

❓ lifecycle

advanced

How to use Vue lifecycle hooks inside a JSX component?

Which is the correct way to run code when a Vue JSX component mounts?

Vue

import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  setup() {
    onMounted(() => {
      console.log('Mounted!');
    });
    return () => <div>Check console</div>;
  }
});

A Use a lifecycle method named componentDidMount inside the render function.

B Use the onMounted hook inside setup to run code after the component mounts, as shown.

C Add a mounted() method in the component options object alongside setup.

D Call console.log directly inside the render function to simulate mounting.

💡 Hint

Vue 3 uses composition API lifecycle hooks inside setup.

In Vue 3 with JSX, lifecycle hooks like onMounted are called inside setup. Option B correctly uses onMounted to run code after mounting.

❓ state_output

expert

What is the output after clicking the button twice?

Given this Vue JSX component, what will be the displayed count after clicking the button two times?

Vue

import { defineComponent, ref } from 'vue';

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

A Count: 1

B Count: 2

C Count: 4

D Count: 0

💡 Hint

Each click runs increment which adds 2 to count.value.

Each click adds 2 to count.value. After two clicks, count.value is 4, so the button shows 'Count: 4'.

Practice

1. What is the main purpose of using JSX in Vue components?

easy

A. To write HTML-like code inside JavaScript functions for UI rendering

B. To replace JavaScript with HTML code

C. To write CSS styles directly inside Vue components

D. To create Vue components without any JavaScript

Solution

1. Step 1: Understand JSX role in Vue

   JSX allows writing HTML-like syntax inside JavaScript, making UI code dynamic and easier to manage.

2. Step 2: Compare options

   Only To write HTML-like code inside JavaScript functions for UI rendering correctly describes JSX's purpose. Others confuse JSX with CSS or removing JavaScript.

3. Final Answer:

   To write HTML-like code inside JavaScript functions for UI rendering -> Option A

4. Quick Check:

   JSX = HTML-like code in JS [OK]

Hint: JSX mixes HTML look inside JavaScript functions [OK]

Common Mistakes:

• Thinking JSX replaces JavaScript entirely
• Confusing JSX with CSS styling
• Believing JSX removes the need for Vue components

2. Which of the following is the correct way to return JSX inside the setup() function in Vue 3?

easy

A. return Hello;

B. return function() { Hello };

C. return () => (Hello);

D. return { template: 'Hello' };

Solution

1. Step 1: Recall Vue 3 setup JSX syntax

   In Vue 3, setup() returns a render function, usually an arrow function returning JSX wrapped in parentheses.

2. Step 2: Evaluate options

   return () => (
   Hello); correctly returns an arrow function with JSX. return

   Hello

   ; returns JSX directly (invalid). return function() {

   Hello

   }; returns a function but misses return statement. return { template: '

   Hello

   ' }; uses template string, not JSX.

3. Final Answer:

   return () => (<div>Hello</div>); -> Option C

4. Quick Check:

   setup returns arrow function with JSX [OK]

Hint: Always return an arrow function wrapping JSX in setup() [OK]

Common Mistakes:

• Returning JSX directly without a function
• Using function without return statement
• Confusing JSX with template strings

3. What will be the rendered output of this Vue JSX component?

import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const name = 'Vue';
    return () => (
      

        
Hello, {name}!
      
    );
  }
});

medium

A. Hello, Vue!

B. Hello, {name}!

C. Hello, !

D. SyntaxError due to JSX expression

Solution

1. Step 1: Understand JSX expression interpolation

   In JSX, curly braces insert JavaScript expressions. Here, {name} inserts the string 'Vue'.

2. Step 2: Predict rendered HTML

   The component renders a div with an h1 containing 'Hello, Vue!'. No syntax errors occur.

3. Final Answer:

   <div><h1>Hello, Vue!</h1></div> -> Option A

4. Quick Check:

   JSX {name} inserts variable value [OK]

Hint: JSX curly braces insert JavaScript values directly [OK]

Common Mistakes:

• Thinking JSX shows variable name literally
• Expecting empty output if variable used
• Assuming JSX causes syntax errors without Babel

4. Identify the error in this Vue JSX component code:

import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const count = 0;
    return () => {
      {count}
    };
  }
});

medium

A. count variable should be reactive

B. JSX cannot be used inside setup()

C. setup() should not return a function

D. Missing parentheses around JSX in return function

Solution

1. Step 1: Check JSX return syntax in arrow function

   The arrow function uses curly braces but does not return JSX explicitly or wrap JSX in parentheses, causing no output.

2. Step 2: Correct syntax for returning JSX

   JSX must be wrapped in parentheses and returned explicitly, e.g., () => ( <button>{count}</button> ).

3. Final Answer:

   Missing parentheses around JSX in return function -> Option D

4. Quick Check:

   JSX must be wrapped in parentheses and returned [OK]

Hint: Wrap JSX in parentheses when returning from arrow function [OK]

Common Mistakes:

• Forgetting to return JSX explicitly
• Not wrapping JSX in parentheses
• Thinking reactive is required for static display

5. You want to create a Vue JSX component that renders a list of items passed as a prop. Which is the correct way to map the items array to JSX elements inside setup()?

hard

A. return () => ({props.items.forEach(item => {item})});

B. return () => ({props.items.map(item => {item})});

C. return () => ({for (const item of props.items) {item}});

D. return () => ({props.items.map(item => '' + item + '')});

Solution

1. Step 1: Understand how to render lists in JSX

   JSX uses JavaScript expressions. map() returns an array of JSX elements, perfect for rendering lists.

2. Step 2: Evaluate each option

   return () => (
   {props.items.map(item =>
   • {item}
   )}
   ); correctly uses map() to return
3. elements. return () => (
   {props.items.forEach(item =>
   • {item}
   )}
   ); uses forEach which returns undefined. return () => (
   {for (const item of props.items)
   • {item}
   }
   ); uses invalid syntax inside JSX. return () => (
   {props.items.map(item => '
   • ' + item + '
   ')}
   ); returns strings, not JSX elements.

4. Final Answer:

   return () => (<ul>{props.items.map(item => <li>{item}</li>)}); -> Option B

5. Quick Check:

   Use map() to return JSX list items [OK]

Hint: Use map() to create JSX elements for lists [OK]

Common Mistakes:

• Using forEach instead of map for JSX lists
• Trying to use for loops inside JSX expressions
• Returning strings instead of JSX elements