App.tsx for Blog Post with complete props and state

App.tsx

import * as React from 'react';
import ChatBox from './components/ChatBox';

export interface IMessage {
  message?: string;
  type?: 'sent' | 'reply';
}

interface IState {
  messages?: IMessage[];
}

interface IMethods {
  sendMessage: (message: string) => void;
}

export default class App extends React.Component<{}, IState> implements IMethods {
  constructor({ }) {
    super({});
    this.state = {
      messages: []
    }
  }

  public sendMessage = (message: string): void => {
    this.setState({ messages: [...this.state.messages!, { message, type: 'sent' }] });
    setTimeout(() => this.replyMessage(message), 1000);
  }

  public replyMessage = (message: string): void => { // This is dummy method
    this.setState({ messages: [...this.state.messages!, { message: `Reply to: ${message}`, type: 'reply' }] });
  }

  public render() {
    const app: React.CSSProperties = {
      textAlign: 'unset'
    }

    const appTitle: React.CSSProperties = {
      fontSize: '1.5em',
      textAlign: 'center'
    }

    const appWindow: React.CSSProperties = {
      border: '1px solid silver',
      borderRadius: 3,
      height: '70vh',
      margin: 10,
      overflowY: 'scroll',
      padding: 10
    }

    const chatItem: React.CSSProperties = {
      background: '#4386C0',
      borderRadius: 2,
      display: 'inline-block',
      margin: 1,
      padding: 5
    }

    const chatItemReply: React.CSSProperties = {
      background: '#DDFFC0',
      borderRadius: 2,
      display: 'inline-block',
      margin: 1,
      padding: 5
    }

    const sentItem: React.CSSProperties = {
      textAlign: 'right'
    }

    const replyItem: React.CSSProperties = {
      textAlign: 'left'
    }

    return (
      <div style={app}>
        <h3 style={appTitle}>This is Chat</h3>
        <div style={appWindow}>
          {
            this.state.messages! ?
              this.state.messages!.map((message, index) =>
                <div style={message.type === 'sent' ? sentItem : replyItem} key={index}>
                  <span style={message.type === 'reply' ? chatItemReply : chatItem}>{message.message!}</span>
                </div>
              )
              : null
          }
        </div>
        <ChatBox
          sendMessage={this.sendMessage}
        />
      </div>
    );
  }
}

ChatBox.tsx

import * as React from 'react';

interface IProps {
  sendMessage: (message: string) => void;
}

interface IState {
  message?: string;
}

export default class ChatBox extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props)
    this.state = {
      message: ''
    }
  }

  public render() {
    const containerStyle: React.CSSProperties = {
      bottom: 30,
      display: 'flex',
      position: 'absolute',
      width: '100%'
    };
    const messageBoxStyle: React.CSSProperties = {
      height: '10vh',
      marginLeft: '2%',
      marginRight: '2%',
      width: '88%'
    };
    const sendButtonStyle: React.CSSProperties = {
      height: '10vh',
      marginRight: '2%',
      width: '6%'
    };
    return (
      <div style={containerStyle}>
        <textarea
          onChange={this.setMessage}
          style={messageBoxStyle}
          value={this.state.message}
        />
        <button
          onClick={this.sendMessage}
          style={sendButtonStyle}
        >
          Send
        </button>
      </div>
    );
  }

  private clear = (): void => {
    this.setState({ message: '' });
  }

  private setMessage = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
    this.setState({ message: event!.target!.value! });
  }

  private sendMessage = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
    event.preventDefault();
    this.props.sendMessage(this.state.message!);
    this.clear();
  }
}