Chat App Sample Without Props

App.tsx

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

class App extends React.Component {
  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}>
        <div>
          <h3 style={appTitle}>This is Chat</h3>
          <div style={appWindow}>
            <div style={sentItem}>
              <span style={chatItem}>Hi</span>
            </div>
            <div style={replyItem}>
              <span style={chatItemReply}>Reply To: Hi</span>
            </div>
          </div>
        </div>
        <ChatBox />
      </div>
    );
  }
}

export default App;

ChatBox.tsx

import * as React from 'react';

export default class ChatBox extends React.Component {
  
  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
          style={messageBoxStyle}
        />
        <button
          style={sendButtonStyle}
        >
          Send
        </button>
      </div>
    );
  }
}