2

In React, I had this component:

const Title = ({ children }) => {
    return <h2>{children}</h2>
}

export default Title

And I could easily use it as <Title>Something</Title>

In Qwik, I can create the same component:

import { component$ } from '@builder.io/qwik'

const Title = component$(({ children }) => {
    return <h2>{children}</h2>
})

export default Title

But <Title>Something</Title> does not work. Even <Title children='Something' /> does not work. But if I change the prop name to text, then <Title text='Something' /> works.

However, the ability to nest components and reuse them under a special name is a must in real-world applications.

How can I render children in Qwik?

Big boy
  • 1,113
  • 2
  • 8
  • 23
  • 1
    There is a perfect reason Qwik not use children instead it use Slot because Qwik is lazy loaded framework that do not download javascript code eagerly it gives Qwik child component freedom to rerender without the wait of its parent. – Harsh Mangalam Jan 07 '23 at 04:18

1 Answers1

5

Qwik uses Slot instead of children

import { component$, Slot } from '@builder.io/qwik'

const Title = component$(() => {
    return <h2><Slot /></h2>
})

export default Title

See https://qwik.builder.io/docs/components/projection/

Daniel Tran
  • 6,083
  • 12
  • 25