React TypeScript useRef Hook

react-typescript-useref-hook.tsx

import { useRef } from 'react';

export default function InputBox() {
  // before render `inputRef` is `null`
  // after render `inputRef` is an Object with a `current` property
  const inputRef = useRef<HTMLInputElement>(null);

  const sendPost = async (e: any) => {
    // prevent page refresh on submit
    e.preventDefault();

    // only submit if message exists
    if (!inputRef.current?.value) return;

    /* Code to submit form data to backend */

    // clear input field after form submit
    inputRef.current.value = '';
  };

  return (
    <div>
      <form onSubmit={sendPost}>
        <input
          type="text"
          ref={inputRef}
          placeholder="What's on your mind?"
        />
        <button onClick={sendPost} hidden type="submit">
          Submit
        </button>
      </form>
    </div>
  );
}