Implementing chat functionality

We are now going to implement functionality to send and receive messages in our chat app. First, we are going to implement all the components that we need. Then, we are going to create a useChat hook to implement the logic to interface with the socket connection and provide functions to send/receive messages. Lastly, we are going to put it all together by creating a chat room.

Implementing the chat components

We are going to implement the following chat components:

• ChatMessage: To display chat messages
• EnterMessage: A field to enter new messages and a button to send them

Implementing the ChatMessage component

Let’s start by implementing the ChatMessage component:

1. Create a new src/components/ChatMessage.jsx file, which will render a chat message.
2. Import PropTypes and define a new function with username and message props:

   import PropTypes from 'prop-types'
   export function ChatMessage({ username, message...