Render function syntax in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Vue render function output?

Consider this Vue 3 render function using h from vue. What will it render in the browser?

Vue

import { h } from 'vue';

export default {
  render() {
    return h('div', { class: 'container' }, [
      h('h1', 'Hello World'),
      h('p', 'This is a render function example.')
    ]);
  }
}

A <div class="container"><h1>Hello World</h1><p>This is a render function example.</p></div>

B <section class="container"><h1>Hello World</h1><p>This is a render function example.</p></section>

C <div class="container"><h1></h1><p></p></div>

D <div><h1>Hello World</h1><p>This is a render function example.</p></div>

💡 Hint

Look at the tag names and class attributes used in the render function.

The render function creates a

with class 'container' containing an

and a

with the given text. So option A matches exactly.

📝 Syntax

intermediate

Which render function syntax is correct for a Vue 3 functional component?

Select the correct render function syntax for a Vue 3 functional component that renders a

A

export default {
  render() {
    return h('button', 'Click me');
  }
}

B

export default {
  setup() {
    return () => h('button', 'Click me');
  }
}

C

export default function render() {
  return h('button', 'Click me');
}

D

export default {
  functional: true,
  render() {
    return h('button', 'Click me');
  }
}

💡 Hint

Vue 3 functional components use setup returning a render function.

In Vue 3, functional components are defined by a setup function returning a render function. Option B follows this pattern.

🔧 Debug

advanced

What error does this Vue render function produce?

Identify the error when running this Vue 3 render function code:

Vue

import { h } from 'vue';

export default {
  render() {
    return h('div', { className: 'box' }, 'Content');
  }
}

A No error, renders a div with class 'box' and text 'Content'.

B TypeError: Cannot read property 'className' of undefined.

C The class attribute is ignored; the div has no class.

D Warning: Unknown property 'className' used in render function.

💡 Hint

Vue uses 'class' attribute, not 'className' like React.

Vue render functions expect 'class' for CSS classes, not 'className'. Using 'className' triggers a warning about unknown property.

❓ state_output

advanced

What is the output after clicking the button in this Vue render function component?

Given this Vue 3 component with a render function and state, what text will the button show after one click?

Vue

import { h, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return () => h('button', { onClick: increment }, `Count: ${count.value}`);
  }
}

A Count: 1

B Count: 0

C Count: NaN

D Count: undefined

💡 Hint

Reactive refs accessed inside render functions create dependencies that trigger re-renders.

When setup() returns a render function in Vue 3, accessing count.value inside it tracks the ref as a dependency. The increment() updates the ref, triggering a re-render where the new value '1' is read and displayed.

🧠 Conceptual

expert

Which statement about Vue 3 render functions is true?

Choose the correct statement about Vue 3 render functions and their usage.

A Render functions must always use JSX syntax to work in Vue 3.

B Render functions can only return a single root element; multiple siblings cause errors.

C Render functions can return arrays of elements without wrapping them in a parent element.

D Render functions cannot access reactive state inside setup().

💡 Hint

Think about how Vue 3 handles fragments in render functions.

Vue 3 supports fragments, so render functions can return arrays of elements without a wrapper. JSX is optional, and reactive state is accessible in setup.

Practice

1. What is the main purpose of the h function in Vue render functions?

easy

A. To create virtual DOM elements in JavaScript

B. To define CSS styles for components

C. To fetch data from an API

D. To register a new Vue component

Solution

1. Step 1: Understand the role of h in Vue

   The h function is used to create virtual DOM nodes in Vue's render functions.

2. Step 2: Differentiate from other Vue tasks

   Creating elements is different from styling, fetching data, or registering components.

3. Final Answer:

   To create virtual DOM elements in JavaScript -> Option A

4. Quick Check:

   h creates elements [OK]

Hint: Remember: h means 'hyperscript' for elements [OK]

Common Mistakes:

• Confusing h with CSS or data fetching
• Thinking h registers components
• Assuming h is a lifecycle hook

2. Which of the following is the correct syntax for a simple Vue render function returning a <div> with text 'Hello'?

easy

A. render() { return h('div', { text: 'Hello' }) }

B. render() { return Hello }

C. render() { return h(div, 'Hello') }

D. render() { return h('div', 'Hello') }

Solution

1. Step 1: Check the correct use of h function

   The h function takes a tag name as a string and children as the second argument.

2. Step 2: Identify correct syntax

   render() { return h('div', 'Hello') } correctly uses h('div', 'Hello'). render() { return
   Hello } uses JSX which is not default Vue render syntax. render() { return h(div, 'Hello') } misses quotes around 'div'. render() { return h('div', { text: 'Hello' }) } incorrectly uses an object with a text property.

3. Final Answer:

   render() { return h('div', 'Hello') } -> Option D

4. Quick Check:

   Tag as string + children string = correct syntax [OK]

Hint: Tag names must be strings in h calls [OK]

Common Mistakes:

• Omitting quotes around tag names
• Using JSX syntax without setup
• Passing text inside an object instead of as child

3. What will the following Vue render function output?

render() { return h('ul', [ h('li', 'One'), h('li', 'Two') ]) }

medium

A. OneTwo

B. OneTwo

C. OneTwo

D. SyntaxError

Solution

1. Step 1: Understand nested h calls

   The outer h creates a ul element. The children are an array of two li elements created by inner h calls.

2. Step 2: Translate to HTML output

   This produces a ul with two li children: 'One' and 'Two'.

3. Final Answer:

   <ul><li>One</li><li>Two</li></ul> -> Option C

4. Quick Check:

   Nested h creates nested elements [OK]

Hint: Arrays in h create multiple children elements [OK]

Common Mistakes:

• Thinking children array concatenates text
• Missing that h returns elements, not strings
• Assuming syntax error from array usage

4. Identify the error in this Vue render function:

render() { return h('button', { onclick: () => alert('Clicked') }, 'Click me') }

medium

A. Event handler key should be 'onClick' with capital C

B. Event handler key should be 'onclick' all lowercase

C. Event handler key should be 'onClick' but Vue expects 'onClick' as camelCase

D. Event handler key should be 'onClick' but Vue expects 'onClick' as 'onClick'

Solution

1. Step 1: Recall Vue event handler naming in render functions

   Vue expects event handlers in render functions to use camelCase keys prefixed with 'on', like 'onClick'.

2. Step 2: Identify the incorrect key

   The code uses 'onclick' with lowercase 'c', which Vue does not recognize as an event handler.

3. Final Answer:

   Event handler key should be 'onClick' with capital C -> Option A

4. Quick Check:

   Vue event keys are camelCase 'onClick' [OK]

Hint: Use camelCase event keys like 'onClick' in render functions [OK]

Common Mistakes:

• Using lowercase event keys instead of camelCase
• Confusing Vue event keys with JSX syntax
• Assuming 'onclick' works like HTML attributes

5. How can you use a Vue render function to conditionally render a <span> with text 'Active' only if a signal isActive is true, otherwise render <span> with 'Inactive'?

hard

A. render() { if (isActive) return h('span', 'Active'); else return h('span', 'Inactive') }

B. render() { return h('span', isActive() ? 'Active' : 'Inactive') }

C. render() { return h('span', { text: isActive ? 'Active' : 'Inactive' }) }

D. render() { return h('span', isActive ? 'Active' : 'Inactive') }

Solution

1. Step 1: Understand signal usage in Vue 3.4+

   Signals are functions that return current value, so isActive() gets the boolean.

2. Step 2: Use conditional operator inside render

   The ternary operator inside h sets the text child based on isActive().

3. Step 3: Check other options

   render() { if (isActive) return h('span', 'Active'); else return h('span', 'Inactive') } uses isActive directly without calling, which is incorrect for signals. render() { return h('span', { text: isActive ? 'Active' : 'Inactive' }) } incorrectly passes text inside an object. render() { return h('span', isActive ? 'Active' : 'Inactive') } uses isActive without calling.

4. Final Answer:

   render() { return h('span', isActive() ? 'Active' : 'Inactive') } -> Option B

5. Quick Check:

   Call signal function to get value [OK]

Hint: Call signals as functions: use isActive() not isActive [OK]

Common Mistakes:

• Using signal variable without calling as function
• Passing text inside an object instead of as child
• Using if-else without return in render