import React, { useState, ChangeEvent, useEffect } from 'react'; import { User } from '../types/user'; export interface UserFormProps { user: User onChange?: (user: User) => void } export function UserForm({ user, onChange }: UserFormProps) { const [ state, setState ] = useState({ changed: false, user: { id: user && user.id ? user.id : '', name: user && user.name ? user.name : '', email: user && user.email ? user.email : '', createdAt: user && user.createdAt ? user.createdAt : null, connectedAt: user && user.connectedAt ? user.connectedAt : null, } }); const onSaveClick = () => { if (!state.changed) return; if (typeof onChange !== 'function') return; onChange(state.user); setState(state => { return { ...state, changed: false, }; }) }; const onUserAttrChange = function(attrName: string, evt: ChangeEvent) { const value = evt.currentTarget.value; setState(state => { return { ...state, changed: true, user: { ...state.user, [attrName]: value, } }; }); }; return (

{state.user.email}

{state.user.connectedAt}

{state.user.createdAt}

); }