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•3w 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

snorbiOP•3w 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•3w 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“

Gaming

Programming

Passing Component in props