We divide the chat room into two subcomponents: a message and the input box. When the user sends a new message, it is sent to the main component. Message of the user will be shown on the right and other messages on the left, as shown in the following screenshot:
React does not have two-way bindings. Instead, we can store the value in the state and modify it when the onChange event is fired. For the input box, we will use this technique. The textbox should be emptied when the user has sent his/her message. With this binding, we can easily do that by modifying the value in the state to an empty string:
class InputBox extends React.Component<{ onSubmit(value: string): void; }, { value: string }> {
state = {
value: ""
};
render() {
return (
<form onSubmit={e => this.submit(e)}>
<input onChange={e => this.changeValue((e.target as HTMLInputElement).value)} value...