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>

<label>

and the

<input>

<input>

but also the

<input>

<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.

SolidJS•16mo 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>

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

<label>

and the

<input>

<input>

but also the

<input>

<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.

Passing Component in props

Similar Threads

Passing Component in props

Similar Threads

Similar Threads

Similar Threads