captaindaylight. Posts - Answer Overflow

captaindaylight.

•Created by captaindaylight. on 8/22/2023 in #support

Default values in props with Merge Giving me a weird interface

In the situation where I want to possibly pass in prop, say arrOfStrings:

 tsx
interface ComponentProps {
  arrOfStrings?: string[]
}

export default function Component(props: ComponentProps) {
  const merged = mergeProps(
    {
      arrOfStrings: [],
    },
    props
  );
  // ... etc
}

 tsx
interface ComponentProps {
  arrOfStrings?: string[]
}

export default function Component(props: ComponentProps) {
  const merged = mergeProps(
    {
      arrOfStrings: [],
    },
    props
  );
  // ... etc
}

I'm getting a resulting type for merged as :

 ts
const merged: {
    arrOfStrings: (string[] | never[]) & (string[] | never[] | undefined);
}

 ts
const merged: {
    arrOfStrings: (string[] | never[]) & (string[] | never[] | undefined);
}

How can I resolve this in Typescript?

9 replies

SSolidJS

•Created by captaindaylight. on 4/27/2023 in #support

Losing Reactivity When I Import Solid Component in Lib

2 replies

SSolidJS

•Created by captaindaylight. on 4/3/2023 in #support

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?

6 replies

Gaming

Programming