Basic View/Edit Components

Component Template

import { useState } from 'react';

export interface IComponentProps {

}

export default function Component(props: IComponentProps) {
    return (
        <div>
            Component
        </div>
    );
}

View-Only Component

import React from 'react';
import { IUser } from './../model/models';
import './UserView.css';

export interface IUser {
    username:   string;
    email:      string;
}

export default function UserView(props: IUserViewProps) {
    return (
        <div className="UserView-container">
            <p>UserView</p>
            <p>{props.username}</p>
            <p>{props.email}</p>
        </div>
    );
};

---

Editable Component

import React, { FormEvent } from 'react';
import { IUser } from './../model/models';
import './UserEdit.css';

interface IUserEditProps { 
    user: IUser,
    onEmailChange(email: string): void;
};

export default function UserEdit(props: IUserEditProps) {
    // Occurs when email is changed...
    const onEmailChange = (event: FormEvent) => {
        const email = (event.currentTarget as HTMLInputElement).value;
        props.onEmailChange(email);
    }

    return (
        <div className="UserEdit-container">
            <p>Username: {props.user.username}</p>
            <input type="email" value={props.user.email} 
                onChange={(event) => { onEmailChange(event); }}
            />
        </div>
    );
};