Correct Syntax of passing a Component via prop

I have this component.

const Test = (props: ParentProps & { label?: JSXElement }) => {
  return (
    <div>
      <Show when={props.label}>{props.label}</Show>
      {props.children}
    </div>
  )
}

const Test = (props: ParentProps & { label?: JSXElement }) => {
  return (
    <div>
      <Show when={props.label}>{props.label}</Show>
      {props.children}
    </div>
  )
}

const Test = (props: ParentProps & { label?: JSXElement }) => {
  return (
    <div>
      <Show when={props.label}>{props.label}</Show>
      {props.children}
    </div>
  )
}

const Test = (props: ParentProps & { label?: JSXElement }) => {
  return (
    <div>
      <Show when={props.label}>{props.label}</Show>
      {props.children}
    </div>
  )
}

Whenever I provide a label like so

<Test label={<Test>Hello</Test>}>World</Test>

<Test label={<Test>Hello</Test>}>World</Test>

<Test label={<Test>Hello</Test>}>World</Test>

<Test label={<Test>Hello</Test>}>World</Test>

I get hydration errors. I don't see why this would be problematic other than maybe I'm using the syntax wrong?

Cheers

Correct Syntax of passing a Component via prop

Similar Threads

Similar Threads

Similar Threads