#How to pass down an interface to child component in React?

2 messages · Page 1 of 1 (latest)

robust maple
#

How to pass down an interface to child component in React?

#
import { InputType } from '@types'
import { UseFormRegister } from 'react-hook-form'

interface Props {
  label: string
  name: string
  type: InputType
  placeholder?: string
  register: UseFormRegister<>
}

const TextField: FC<Props> = ({ label, name, type, register, placeholder }) => {
  if (type === InputType.textarea) {
    return (
      <div>
        <label htmlFor={name}>{label}</label>
        <textarea name={name} id={name} />
      </div>
    )
  }

  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <input
        name={name}
        type={type}
        id={name}
        placeholder={placeholder}
        {...register(name)}
      />
    </div>
  )
}

export default TextField