React forms that don't reload page

form.tsx

import * as React from 'react';

interface FormProps {
  /**
   * Automatically prevents the default browser behavior so you don't have to
   */
  onSubmit: () => any;
  children?: JSX.Element;
}
export const Form = ({ onSubmit, children}: FormProps) =>
  <form
    onKeyDown={
      (e) => {
        /**
         * Note: Pressing enter in some input in a browser forms
         *  triggers onClick on the first child button
         *
         * So, prevent `enter` from triggering `onClick` on any buttons
         *  and instead trigger onSubmit
         */
        if (e.key === 'Enter') {
          e.preventDefault();
          onSubmit();
        }
      }
    }

    onSubmit={
      (e) => {
        /**
         * Prevent submit from reloading the page
         */
        e.preventDefault();
        e.stopPropagation();
        onSubmit();
      }
    }>
    {children}
  </form>

Thanks! +rep!

thanks, it was really helpful.