Entanglement Example

createUser.tsx

import React, { FC } from 'react';

import styles from './createUser.module.css';

export interface Contact {
    name: string,
    email: string,
    phoneNumber: string,
}

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

export const CreateUser: FC<Props> = ({ user, setUser }) => (
    <form className={styles.create__user}>
        <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')} />
    </form>
);