SolidJSS
SolidJS•14mo ago•
4 replies
snorbi

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>

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

And call it like:
<FieldWithLabel id="nameField" ref={nameFieldRef} label="Name" field={<input autocomplete="name" required />} />

Thanks.
Was this page helpful?