S
SolidJS•12mo ago
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>
<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.
3 Replies
Madaxen86
Madaxen86•12mo ago
Why not drop the fieldprop and instead add make FieldLabelProps extend ComponenProps<"input"> You then can use splitProps to extract the label and and just pass the props to an input element
snorbi
snorbiOP•12mo ago
You are right but what if I want to allow <textarea> as well? (Although I know the above example is <input>-specific.) I go with your recommendation, I'm too beginner for a more generic solution 🙂 Thanks,
Madaxen86
Madaxen86•12mo ago
If you want to make it more generic you may use the Dynamic component and then make two types one where the component prop of dynamic is „input“ and one „textarea“

Did you find this page helpful?