Breaking News: Grepper is joining You.com. Read the official announcement!

input field react ttypescript

Hanna Khonskaya answered on December 27, 2023 Popularity 2/10 Helpfulness 1/10

answer input field react ttypescript

input field react ttypescript

Comment

import { ChangeEvent, FC } from 'react'

interface InputProps {
  type: 'text' | 'number' | 'email' | 'password'
  label: string
  value: string | number
  name: string
  placeholder: string
  error: boolean
  disabled?: boolean
  onChange: (e: ChangeEvent<HTMLInputElement>) => void
}

const Input: FC<InputProps> = ({
  type,
  label,
  value,
  name,
  placeholder,
  error,
  disabled,
  onChange,
}) => {
  return (
    <div className="input-wrapper">
      <label htmlFor={label}>{label}</label>
      <input
        type={type}
        id={label}
        value={value}
        name={name}
        placeholder={placeholder}
        onChange={onChange}
        disabled={disabled}
      />
      {error && <p className="error">Input filed can't be empty!</p>}
    </div>
  )
}

export default Input

Popularity 2/10 Helpfulness 1/10 Language javascript

Source: www.codevertiser.com

Tags: input-field javascript

Link to this answer
Share Copy Link