Create a reusable Form Input component with React & TypeScript-CodePudding

How can I define input attributes in typescript? I have an AddUser Component and TextInput Component, I want to import the TextInput component inside the AddUser component and then pass props to the TextInput component.

AddUser.tsx

import Button from '../Shared/Form/Button/Button';
import Form from '../Shared/Form/Form';
import TextArea from '../Shared/Form/TextArea/TextArea';
import TextInput from '../Shared/Form/TextInput/TextInput';

const AddUser = () => {
    return (
        <div>
            <h1>Add User</h1>
            <Form method="post" className={'user-form'}>
                <TextInput label={'Name'} type="text" name="name" required />
                <TextInput label={'Email'} type="email" name="email" required />
                <TextInput label={'Country'} type="text" name="country" required />
                <TextInput label={'Phone'} type="text" name="phone" required />
                <TextArea label={'Address'} name="address" cols="30" rows="4" />
                <div className="form-button">
                    <Button type={'submit'} className={'btn-add'}>
                        Add
                    </Button>
                    <Button type={'submit'} className={'btn-close'}>
                        Cancel
                    </Button>
                </div>
            </Form>
        </div>
    );
};

export default AddUser;

TextInput.tsx

const TextInput = ({ className, label, ...rest }: { className: string; label: string }) => {
    return (
        <div className={`${className} form-field`}>
            <label htmlFor={label}>{label}</label>
            <input {...rest} />
        </div>
    );
};

export default TextInput;

CodePudding user response：

You can extend HTMLProps which comes with react:

import { HTMLProps } from "react";

interface MyCOmponentProps extends HTMLProps<HTMLInputElement> {
  {...}
}

CodePudding user response：

This is how we can make a reusable component. maybe I missed something in onChangeAction according to type script. please let me know me in the comment section so that i can help you better

Example codesandbox

const AddUser = () => {
  return (
    <div>
      <h1>Add User</h1>
      <form method="post" className={"user-form"}>
        <TextInput
          label={"Name"}
          placeholder="Name"
          type="text"
          name="name"
          required
        />
        <TextInput
          label={"Email"}
          placeholder="Email"
          type="email"
          name="email"
          required
        />
        <TextInput
          label={"Country"}
          placeholder="Country"
          type="text"
          name="country"
          required
        />
        <TextInput
          label={"Phone"}
          placeholder="Phone"
          type="text"
          name="phone"
          required
        />
      </form>
    </div>
  );
};

export default AddUser;

const TextInput = ({
  className,
  label,
  value,
  type,
  onChangeAction,
  placeholder
}) => {
  return (
    <div className={`${className} form-field`}>
      <label htmlFor={label}>{label}</label>
      <input
        placeholder={placeholder || "Text"}
        type={type || "text"}
        value={value}
        onChange={onChangeAction}
      />
    </div>
  );
};

CodePudding user response：

It's not exatly the answer to your question but did you look at formik -> https://formik.org/docs/overview

You can create reusable form :)