How can I pass a JSX.Element as prop in Qwik?

Question

I have two components in Qwik V 1.2.6 the first one is the parent and looks like that:

.
.
.
return (
<Dropdown
   element={<h1>Hello world</h1>}
/>
);
.
.
.

the child component receives as prop the element JSX object

export default component$((props: {
   button: JSX.Element;
}) => {
   const { button } = props;
   return (
      <div>
         {button}
      </div>
   );
});

The problem is when the component is rendered, is rendered the string '[object Object]' instead of h1 element.

I would like to know what is the error I am making when passing a component as a property of another component.

As an extra info I try to print using console.log(button) in the child component and the output was:

JSXNodeImpl {
  type: 'h1',
  props: {},
  immutableProps: null,
  children: 'Hello world',
  flags: 3,
  key: 'bf_0',
  dev: {
    stack: 'Error\n' +
      '    at Module._jsxQ (/Users/josueabraham/source/repos/app-web-qwik/node_modules/@builder.io/qwik/core.mjs:3987:20)\n' +
      '    at AsyncFunction.appbar_component_3tBdI098c3c (/Users/josueabraham/source/repos/app-web-qwik/src/components/core/navigation/appbar.tsx:25:56)\n' +
      '    at AsyncFunction.invoke (/Users/josueabraham/source/repos/app-web-qwik/node_modules/@builder.io/qwik/core.mjs:1293:26)\n' +
      '    at eval (/Users/josueabraham/source/repos/app-web-qwik/node_modules/@builder.io/qwik/core.mjs:8270:35)\n' +
      '    at then (/Users/josueabraham/source/repos/app-web-qwik/node_modules/@builder.io/qwik/core.mjs:436:56)\n' +
      '    at eval (/Users/josueabraham/source/repos/app-web-qwik/node_modules/@builder.io/qwik/core.mjs:8256:20)\n' +
      '    at eval (/Users/josueabraham/source/repos/app-web-qwik/node_modules/@builder.io/qwik/core.mjs:2401:27)\n' +
      '    at safeCall (/Users/josueabraham/source/repos/app-web-qwik/node_modules/@builder.io/qwik/core.mjs:423:25)\n' +
      '    at executeComponent (/Users/josueabraham/source/repos/app-web-qwik/node_modules/@builder.io/qwik/core.mjs:2401:12)\n' +
      '    at renderSSRComponent (/Users/josueabraham/source/repos/app-web-qwik/node_modules/@builder.io/qwik/core.mjs:2803:17)',
    fileName: 'components/core/navigation/appbar.tsx',
    lineNumber: 14,
    columnNumber: 31
  }
}

score 2 · Accepted Answer · answered Jul 12 '23 at 03:40

According to its document, the Slot has been used to replace for children in React which means instead passing an element, we just simply pass it as children with a q:slot property such as:

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

export default component$(() => {
   return (
      <div>
         <Slot name="button" />
      </div>
   );
});

// and this is where you use it
<Dropdown>
  <h1 q:slot="button">Hello world</h1>
</Dropdown>

How can I pass a JSX.Element as prop in Qwik?

1 Answers1