Spread props in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Svelte component render?

Consider this Svelte component using spread props:

<script>
  let props = { id: 'btn1', class: 'primary', disabled: true };
</script>

<button {...props}>Click me</button>

What will be the rendered output in the browser?

A <button id="btn1" class="primary" disabled>Click me</button>

B <button id="btn1" class="primary">Click me</button>

C <button disabled>Click me</button>

D <button>Click me</button>

💡 Hint

Remember how boolean attributes like disabled behave in HTML.

The spread operator passes all properties from props as attributes. The disabled attribute is boolean and appears without a value when true.

📝 Syntax

intermediate

Which spread syntax is correct in Svelte?

Which of the following is the correct way to spread props in a Svelte component?

A <Component {props} />

B <Component {...props} />

C <Component ...props />

D <Component {..props} />

💡 Hint

Think about how JavaScript spread syntax looks inside JSX-like attributes.

The correct syntax uses three dots inside curly braces: {...props}. Other options are invalid in Svelte.

🔧 Debug

advanced

Why does this spread cause an error?

Given this Svelte snippet:

<script>
  let props = null;
</script>

<input type="text" {...props} />

What error will this cause and why?

A ReferenceError because props is undefined

B SyntaxError due to invalid spread syntax

C TypeError because you cannot spread null

D No error, renders input without extra props

💡 Hint

Think about what spreading a non-object value does in JavaScript.

Spreading expects an object. Spreading null causes a TypeError at runtime.

❓ state_output

advanced

What is the final class attribute value?

Look at this Svelte component:

<script>
  let base = { class: 'btn' };
  let extra = { class: 'primary' };
</script>

<button {...base} {...extra}>Press</button>

What will be the value of the class attribute on the button?

A primary

B btn primary

C btn

D btnprimary

💡 Hint

Later spread props overwrite earlier ones.

The second spread {...extra} overwrites the class from {...base}, so only 'primary' remains.

🧠 Conceptual

expert

How does Svelte handle spread props with reactive updates?

Consider this Svelte code:

<script>
  let props = { title: 'Hello' };
  $: props = { ...props, title: 'Hi' };
</script>

<h1 {...props}>Welcome</h1>

What will be the rendered title attribute on the <h1> element after reactive update?

A An error occurs

B Hello

C undefined

D Hi

💡 Hint

Reactive statements update variables and trigger re-render.

The reactive statement updates props to have title: 'Hi'. The spread uses the latest props, so the attribute is 'Hi'.