snorbi Posts - Answer Overflow

snorbi

•Created by snorbi on 11/29/2024 in #support

Passing Component in props

I try to generalize the following fragment:

<div>
  <div><label for="nameField">Name</label></div>
  <div><input id="nameField" ref={nameFieldRef} autocomplete="name" required /></div>
</div>

<div>
  <div><label for="nameField">Name</label></div>
  <div><input id="nameField" ref={nameFieldRef} autocomplete="name" required /></div>
</div>

where my component would apply the same ID for the <label> and the <input> but also the <input> would come as a parameter in props. Something like this - except that it does not work 😄

interface FieldWithLabelProps {
  id: string
  ref: HTMLInputElement
  label: string
  field: JSX.Element <--- How to narrow down to permit only <input>?
}

const FieldWithLabel: Component<FieldWithLabelProps> = (props) => {
  return (
    <div>
      <div><label for={props.id}>{props.label}</label></div>
      <div>{props.field}</div> <--- How to apply "id" attribute and props.ref to props.field?
    </div>
  )
}

interface FieldWithLabelProps {
  id: string
  ref: HTMLInputElement
  label: string
  field: JSX.Element <--- How to narrow down to permit only <input>?
}

const FieldWithLabel: Component<FieldWithLabelProps> = (props) => {
  return (
    <div>
      <div><label for={props.id}>{props.label}</label></div>
      <div>{props.field}</div> <--- How to apply "id" attribute and props.ref to props.field?
    </div>
  )
}

And call it like:

<FieldWithLabel id="nameField" ref={nameFieldRef} label="Name" field={<input autocomplete="name" required />} />

<FieldWithLabel id="nameField" ref={nameFieldRef} label="Name" field={<input autocomplete="name" required />} />

Thanks.

5 replies

SSolidJS

•Created by snorbi on 11/21/2024 in #support

Rendering <input>s in <For>

How can I reference a dynamic number of <input>s to read their value? Thanks.

6 replies

SSolidJS

•Created by snorbi on 11/12/2024 in #support

Handling <input>

Is this a correct way to handle <input> fields? <input onInput={e => setUserName(e.target.value)} value={userName()} /> Or should I use a ref instead and read the field value when it is needed? Is there a concept of "controlled input" in solidjs? Or only "uncontrolled input"? Thanks.

6 replies

SSolidJS

•Created by snorbi on 11/6/2024 in #support

Is this a correct implementation? :)

I'm new to both JSX and Solid. Is this a correct implementation or can it be simplified?

const NavLink = (props) => {
  const [_, restProps] = splitProps(props, ["href", "children"]);
  return <a href={UrlPrefix + props.href} {...restProps}>{props.children}</a>;
}

const NavLink = (props) => {
  const [_, restProps] = splitProps(props, ["href", "children"]);
  return <a href={UrlPrefix + props.href} {...restProps}>{props.children}</a>;
}

The goal is to render a <a> with a customized href prop, rendering the children, while passing all other props unmodified. Thanks.

3 replies

SSolidJS

•Created by snorbi on 11/3/2024 in #support

Reactive array transformation

What is the correct way to make the result of a filtering+mapping operation on an array reactive?

  return store.productTreeData
    .filter(e => e.parentId == parentId)
    .map(e => {
      const children = ...
      return { productTreeItem: e, children: children.length > 0 ? children : null };
    });

  return store.productTreeData
    .filter(e => e.parentId == parentId)
    .map(e => {
      const children = ...
      return { productTreeItem: e, children: children.length > 0 ? children : null };
    });

What should I write instead of the object literal? What I would like to do is to refactor some code to separate functions but the result to remain "reactive". Thanks.

6 replies

SSolidJS

•Created by snorbi on 11/3/2024 in #support

Display HTML entity

How can I display a text containing HTML entities? <div>{props.text}</div> displays the source code version of the entity. Thanks.

2 replies

Gaming

Programming