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>
  )
}

Whenever I provide a label like so

<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

12 Replies

Otonashi•2y ago

don't access props.label twice each time you do it you create a new label

MartnartOP•2y ago

Ahhhh

Otonashi•2y ago

in this case Show isn't really doing anything (other than maybe if props.label was 0 it wouldn't show) so just dropping Show works but if you have to access it multiple times wrap it in a children helper

const resolvedChildren = children(() => props.label);
<Show when={resolvedChildren()}>{resolvedChildren()}</Show>

const resolvedChildren = children(() => props.label);
<Show when={resolvedChildren()}>{resolvedChildren()}</Show>

MartnartOP•2y ago

Great. Thanks for quick help ❤️

Otonashi•2y ago

a memo should probably also work but i can't say for sure

Max•2y ago

Cool I didnt know about this accessing twice thing, slightly related could someone check this pattern I've been using a bit, anything to watch out for

import { Accessor, createSignal } from "solid-js";

const when = <V extends unknown, R extends unknown, N extends unknown>(
  value: Accessor<V | undefined>,
  then: (v: V) => R,
  fallback: N
) => {
  const resolved = value();
  if (resolved !== undefined) return then(resolved);
  return fallback;
};

const Comp = () => {
  const [maybeString] = createSignal<string | undefined>();
  return (
    <div>
      {when(
        maybeString,
        (value) => (
          <div>{value}</div>
        ),
        null
      )}
    </div>
  );
};

import { Accessor, createSignal } from "solid-js";

const when = <V extends unknown, R extends unknown, N extends unknown>(
  value: Accessor<V | undefined>,
  then: (v: V) => R,
  fallback: N
) => {
  const resolved = value();
  if (resolved !== undefined) return then(resolved);
  return fallback;
};

const Comp = () => {
  const [maybeString] = createSignal<string | undefined>();
  return (
    <div>
      {when(
        maybeString,
        (value) => (
          <div>{value}</div>
        ),
        null
      )}
    </div>
  );
};

Otonashi•2y ago

i don't know what behaviour is desired here, but any signal called in then will be tracked, most likely unintentionally, same with fallback except since it isn't a function it'll rerun every time anything else changes other than that it has the same issue as keyed Show where everything will rerun instead of it being fine grained, if that isn't a behaviour you want

Max•2y ago

Great thank you, I have to understand better tracked meaning, then should get a value not a signal but I guess its still the same issue. Originally I think I came up with this pattern to try and solve a problem with Show , type safety and reactivity, as shown here https://playground.solidjs.com/anonymous/61745710-720a-44ed-a7e9-7e611b5edaf5, but it solves absolutely nothing 😂 . Same exact issue as keyed Show

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Otonashi•2y ago

i mean just wait for 1.7 instead or use the beta npm i [email protected] then you can use the callback form without keyed which will give you an accessor instead of the value

Max•2y ago

That's cool nice! thanks

Max•2y ago

Is there a place to see solid 1.7 stuff? or just on https://github.com/solidjs/solid/commits/next

GitHub

Commits · solidjs/solid

A declarative, efficient, and flexible JavaScript library for building user interfaces. - Commits · solidjs/solid

Otonashi•2y ago

yeah

Gaming

Programming

Correct Syntax of passing a Component via prop