O'Reilly logo

TypeScript Blueprints by Ivo Gabe de Wolff

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating the chat room

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:

Creating the chat room

Two-way bindings

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required