Adding New Messages

Now the messages are being rendered from an array, the next step is to write the code to add new messages into this array when the user clicks your Send button.

The text box is inside a <form> element, you can listen to the onSubmit() event handler on this form to add a new message to the state. A form submit handler in TypeScript looks like this:

const onSubmit: React.FormEventHandler = (e) => {
  e.preventDefault();
  // your code here...
}

And it can be linked to the <form> tag's submit event:

<form onSubmit={onSubmit}>
  {/* Your form inputs */}
</form>