Composable User Form

userForm.tsx

import React, { FC } from 'react';

export interface Contact {
    name: string,
    email: string,
    phoneNumber: string,
    referredBy?: string,
    role?: string,
}

interface Props {
    user: Contact;
    setUser: (property: keyof Contact) => (e: React.ChangeEvent<HTMLInputElement>) => void;
    className?: string;
}

export const UserForm: FC<Props> = ({ user, setUser, className, children }) =>  (
    <form className={className}>
        <label>Name</label>
        <input value={user.name} onChange={setUser('name')} />
        <label>Email</label>
        <input value={user.email} onChange={setUser('email')} />
        <label>Phone Number</label>
        <input value={user.phoneNumber} onChange={setUser('phoneNumber')} />
        {children}
    </form>
);