Functional components in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue functional component render?

Consider this Vue 3 functional component using the Composition API. What will it render when used?

Vue

import { h } from 'vue'

const FunctionalComp = (props) => {
  return h('button', { type: 'button' }, `Click me ${props.name}`)
}

export default FunctionalComp

A <button type="button">Click me</button>

B <button>Click me Alice</button>

C <button type="button">Click me Alice</button>

D <div>Click me Alice</div>

💡 Hint

Look at the element type and attributes created by the h function.

The functional component returns a button element with type="button" and text including the name prop. So option C matches exactly.

❓ state_output

intermediate

What is the output of this functional component with reactive state?

Given this Vue 3 functional component using ref inside, what will it render initially?

Vue

import { ref, h } from 'vue'

const FunctionalCounter = () => {
  const count = ref(0)
  return h('div', `Count is ${count.value}`)
}

export default FunctionalCounter

A <div>Count is undefined</div>

B <div>Count is [object Object]</div>

C <div>Count is</div>

D <div>Count is 0</div>

💡 Hint

Remember to access the value of a ref with .value.

The count is a ref initialized to 0. Accessing count.value gives 0, so the rendered text is 'Count is 0'.

📝 Syntax

advanced

Which option correctly defines a Vue 3 functional component with props?

Choose the correct syntax for a Vue 3 functional component that accepts a title prop and renders it inside an h1 element.

A const MyFuncComp = (props) => h('h1', {}, props.title)

B const MyFuncComp = (props) => h('h1', props.title)

C const MyFuncComp = ({ title }) => h('h1', title)

D const MyFuncComp = (props) => h('h1', { innerHTML: props.title })

💡 Hint

Remember the h function signature: h(tag, props?, children?).

Option A correctly passes an empty props object and the title as children text. Option A and B pass the title as props, which is incorrect. Option A uses innerHTML which is not recommended here.

🔧 Debug

advanced

Why does this Vue 3 functional component cause a runtime error?

Examine this functional component code. Why does it cause an error when rendered?

Vue

import { h } from 'vue'

const BrokenFuncComp = (props) => {
  return h('p', props.message.toUpperCase())
}

export default BrokenFuncComp

A h() requires three arguments but only two are provided

B props.message is undefined causing a TypeError when calling toUpperCase()

C Functional components cannot use props directly

D The component must return a template string, not h() calls

💡 Hint

Check if props.message is always defined before calling string methods.

If props.message is missing or undefined, calling toUpperCase() causes a TypeError. The h function usage is correct.

🧠 Conceptual

expert

What is a key advantage of Vue 3 functional components over regular components?

Choose the best explanation of why you might use a functional component in Vue 3.

A They have no reactive state or lifecycle, so they render faster and use less memory

B They automatically cache all props and prevent re-renders

C They allow using class-based syntax for better organization

D They enable two-way binding without emitting events

💡 Hint

Think about what makes functional components lightweight compared to stateful ones.

Functional components are stateless and have no lifecycle hooks, so they are simpler and faster to render. Other options describe features not related to functional components.

Practice

1. What is a key characteristic of a functional component in Vue?

easy

A. It manages its own state and lifecycle hooks.

B. It requires a template section to render.

C. It can only be used with class-based components.

D. It is stateless and has no reactive data.

Solution

1. Step 1: Understand functional component basics

   Functional components in Vue are designed to be simple and stateless, meaning they do not hold reactive data or manage lifecycle hooks.

2. Step 2: Compare options with definition

   It is stateless and has no reactive data. correctly states that functional components are stateless. Options A, C, and D describe features not applicable to functional components.

3. Final Answer:

   It is stateless and has no reactive data. -> Option D

4. Quick Check:

   Functional component = stateless [OK]

Hint: Functional components do not hold state or lifecycle hooks [OK]

Common Mistakes:

• Thinking functional components have reactive state
• Assuming they use lifecycle hooks
• Confusing with class-based components

2. Which of the following is the correct syntax to define a functional component using the <script setup> syntax in Vue 3?

easy

A. <script setup functional>\nexport default { props: ['text'] }\n</script>

B. <script setup>\nimport { h } from 'vue'\nconst MyFuncComp = (props) => h('div', props.text)\n</script>

C. <script setup>\nexport default { functional: true, props: ['text'] }\n</script>

D. <script setup>\nconst MyFuncComp = (props) => <div>{props.text}</div>\n</script>

Solution

1. Step 1: Recall Vue 3 functional component syntax

   In Vue 3 with <script setup>, functional components can be defined as functions returning VNodes using the h helper.

2. Step 2: Analyze each option

   <script setup>\nimport { h } from 'vue'\nconst MyFuncComp = (props) => h('div', props.text)\n</script> correctly defines a functional component returning a div with text using h. <script setup>\nconst MyFuncComp = (props) => <div>{props.text}</div>\n</script> uses JSX-like syntax which is not default in Vue. Options B and C use options API syntax incorrectly inside <script setup>.

3. Final Answer:

   <script setup> import { h } from 'vue' const MyFuncComp = (props) => h('div', props.text) </script> -> Option B

4. Quick Check:

   Functional component = function returning VNode with h() [OK]

Hint: Use function returning h() in

Common Mistakes:

• Using options API inside
• Trying to use JSX without setup
• Missing h() helper for rendering

3. Given this functional component code, what will be rendered?

<script setup>
import { h } from 'vue'
const Greeting = (props) => h('p', `Hello, ${props.name}!`)
</script>

<template>
  <Greeting name="Alice" />
</template>

medium

A.

B. Hello, {name}!

C. Hello, Alice!

D. Error: Functional component must return a template

Solution

1. Step 1: Understand the functional component output

   The component Greeting is a function that returns a paragraph element with text including the passed prop name.

2. Step 2: Substitute the prop value

   When used with name="Alice", it renders <p>Hello, Alice!</p> as a normal HTML element.

3. Final Answer:

   <p>Hello, Alice!</p> -> Option C

4. Quick Check:

   Functional component renders HTML with props substituted [OK]

Hint: Functional components return rendered HTML with props values [OK]

Common Mistakes:

• Expecting JSX syntax output
• Thinking it returns raw component tag
• Assuming template is required

4. Identify the error in this functional component code:

<script setup>
const Button = (props) => {
  return <button>{props.label}</button>
}
</script>

medium

A. Using JSX syntax without proper setup causes an error.

B. Missing props declaration in options API.

C. Functional components cannot return elements.

D. The function should not use return statement.

Solution

1. Step 1: Check syntax used in functional component

   The code uses JSX-like syntax (<button>{props.label}</button>) inside a function without JSX support configured.

2. Step 2: Understand Vue default rendering

   Vue requires using h() helper or templates unless JSX is set up. Without JSX setup, this causes a syntax error.

3. Final Answer:

   Using JSX syntax without proper setup causes an error. -> Option A

4. Quick Check:

   JSX needs setup; otherwise use h() or template [OK]

Hint: JSX syntax requires special setup; otherwise use h() [OK]

Common Mistakes:

• Assuming JSX works by default
• Forgetting to import h()
• Thinking return statement is disallowed

5. You want to create a functional component that renders a list of items passed as a prop. Which code correctly implements this in Vue 3 using <script setup> and the h function?

hard

A. <script setup>
import { h } from 'vue'
const ItemList = (props) => h('ul', props.items.map(item => h('li', item)))
</script>

B. <script setup>
const ItemList = { functional: true, props: ['items'], template: '<ul><li v-for="item in items">{{ item }}</li></ul>' }
</script>

C. <script setup>
const ItemList = (props) => {
return <ul>{props.items.map(item => <li>{item}</li>)}

D. <script setup>
import { h } from 'vue'
const ItemList = (props) => h('ul', [h('li', props.items)])
</script>

Solution

1. Step 1: Understand how to render lists in functional components

   Using the h function, you can create an unordered list with list items by mapping over the items array and creating li elements.

2. Step 2: Analyze each option

   <script setup> import { h } from 'vue' const ItemList = (props) => h('ul', props.items.map(item => h('li', item))) </script> correctly maps each item to an li element inside a ul. <script setup> const ItemList = { functional: true, props: ['items'], template: '<ul><li v-for="item in items">{{ item }}</li></ul>' } </script> uses options API incorrectly inside <script setup>. <script setup> const ItemList = (props) => { return <ul>{props.items.map(item => <li>{item}</li>)} uses JSX without setup. <script setup> import { h } from 'vue' const ItemList = (props) => h('ul', [h('li', props.items)]) </script> incorrectly passes the whole array as a single li.

3. Final Answer:

   <script setup> import { h } from 'vue' const ItemList = (props) => h('ul', props.items.map(item => h('li', item))) </script> -> Option A

4. Quick Check:

   Map items to li elements using h() inside ul [OK]

Hint: Map array to h('li', item) inside h('ul') for lists [OK]

Common Mistakes:

• Passing whole array as one li
• Using template syntax inside script setup
• Using JSX without setup