Add Text Input Box to Send a Message in React App

The lecture goes over the implementation of the text field and send button that appears in the bottom of the chat room container.

An input element of type attribute text is used for the text box.

A button element of type attribute button is used for the send action.

Since you cannot return more than one thing, you have to enclose the input and button elements inside another element.

You can return multiple things if you enclose them in an array.

Another standard way is enclosing the multiple elements in a container element such as a div.

In React, you can also enclose them in a Fragment component, which eliminates the intermediate div container in the DOM.

Some people write the Fragment with just an empty set of angle brackets with nothing in between.

Some Cascading Style Sheets (CSS) is written to polish the style of the text input and send button.