Passing For Id between InputGroup and Input using children

I'm trying to pass create a JSX structure like:

<InputGroup
  label="Email"
  error="that's not an email"
>
  <Input 
    placeholder="[email protected]"
  />
</InputGroup>

<InputGroup
  label="Email"
  error="that's not an email"
>
  <Input 
    placeholder="[email protected]"
  />
</InputGroup>

My InputGroup component looks like:

export default function InputGroup(props: InputGroupProps) {
  const { label, error, children: childrenProp } = props;
  const [forId] = createSignal(`input-${Math.random().toString(36).substr(2, 9)}`);
  const renderedChildren = children(() => childrenProp);

  createEffect(() => {
    const child = renderedChildren();
    if (child?.props) {
      child.props.id = forId();
    }
  });

  return (
    <>
      <label for={forId()}>{label}</label>
      {renderedChildren()}
      <Show when={!!error}>
        <p>{error}</p>
      </Show>
    </>
  );
}

export default function InputGroup(props: InputGroupProps) {
  const { label, error, children: childrenProp } = props;
  const [forId] = createSignal(`input-${Math.random().toString(36).substr(2, 9)}`);
  const renderedChildren = children(() => childrenProp);

  createEffect(() => {
    const child = renderedChildren();
    if (child?.props) {
      child.props.id = forId();
    }
  });

  return (
    <>
      <label for={forId()}>{label}</label>
      {renderedChildren()}
      <Show when={!!error}>
        <p>{error}</p>
      </Show>
    </>
  );
}

This is if (child?.props) { is giving me the type error:

Property 'props' does not exist on type 'number | boolean | Node | (string & {}) | ResolvedJSXElement[]'.

Property 'props' does not exist on type 'number | boolean | Node | (string & {}) | ResolvedJSXElement[]'.

Does anyone have ideas how to achieve what I'm trying to do with the children helper? Or is there a better approach?

2 Replies

Chronove•2y ago

- Element props should not be destructured, else they will lose reactivity - You c/s-hould use the error render as a fallback (it's an attribute of the Show Element) - instead of creating your own forId you should use createUniqueId() (https://www.solidjs.com/docs/latest/api#createuniqueid) or even just a createMemo instead of a signal which never gets changed For the error you're getting, I don't know the types of child or InputGroupProps so I can only guess that the types aren't correct, as you're error "Property props does not exist..." sounds like a typescript error to me.

Otonashi•2y ago

there are no props on thr child it's just a dom element (if you're passing a single dom element as children) you don't need a signal or memo for the id, just assign it to a variable, and use createUniqueId which makes it identical on both the client and server to be on the safe side you should check that child is actually a dom element; iterate over it if it is an array, and ignore it if it is anything else

Gaming

Programming

Passing For Id between InputGroup and Input using children