theptrk/react-typescript-form-onsubmit.tsx

## react-typescript-form-onsubmit.tsx
const TagSearchPage: NextPage<{ query: string }> = ({ query }) => {
  const router = useRouter();
  const [input, setInput] = useState(query);
  const newPath = `/search/${input}`;
  const title = `Search: ${query}`;

  const { data, isLoading } = api.search.getAll.useQuery({
    query,
  });

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    void router.push(newPath);
  }

  return (
    <>
      <Head>
        <title>{title}</title>
      </Head>
      <PageLayout>
        <h1 className="text-xl">Search View</h1>
        <form
          className="mb-5 mt-2 flex flex-row"
          onSubmit={(e) => handleSubmit(e)}
        >
          <input
            type="text"
            className="mx-1 w-full rounded-sm border bg-transparent p-2"
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
          <button type="submit" className="mx-1 rounded-sm border px-2 py-1">
            Search
          </button>
        </form>
        {isLoading ? (
          <div>Loading...</div>
        ) : (
          data?.map(({ note, author }) => (
            <NoteView note={note} author={author} key={note.id} />
          ))
        )}
      </PageLayout>
    </>
  );
};
	const TagSearchPage: NextPage<{ query: string }> = ({ query }) => {
	const router = useRouter();
	const [input, setInput] = useState(query);
	const newPath = `/search/${input}`;
	const title = `Search: ${query}`;

	const { data, isLoading } = api.search.getAll.useQuery({
	query,
	});

	function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
	e.preventDefault();
	void router.push(newPath);
	}

	return (
	<>
	<Head>
	<title>{title}</title>
	</Head>
	<PageLayout>
	<h1 className="text-xl">Search View</h1>
	<form
	className="mb-5 mt-2 flex flex-row"
	onSubmit={(e) => handleSubmit(e)}
	>
	<input
	type="text"
	className="mx-1 w-full rounded-sm border bg-transparent p-2"
	value={input}
	onChange={(e) => setInput(e.target.value)}
	/>
	<button type="submit" className="mx-1 rounded-sm border px-2 py-1">
	Search
	</button>
	</form>
	{isLoading ? (
	<div>Loading...</div>
	) : (
	data?.map(({ note, author }) => (
	<NoteView note={note} author={author} key={note.id} />
	))
	)}
	</PageLayout>
	</>
	);
	};