Do Not Define Functions Within JSX

UI section of the component should only contain UI code, functions in the middle of the UI breaks the continuity of the readers. Keep the logic / functions out of UI code.

DON'T 💩🧨💣

function ModalForm() {
  return (
    // Form UI
    // ...
    <button
      onClick={() => {
        saveInfo(formData)
          .then(resp => {
            toast.info(resp);
          })
          .catch(err => {
            toast.error(err);
            console.error(err);
          });
      }}>
      Submit
    </button>
  );
}

DO ✅

function ModalForm() {
  const saveFormData = () => {
    saveInfo(formData)
      .then(resp => {
        toast.info(resp);
      })
      .catch(err => {
        toast.error(err);
        console.error(err);
      });
  };

  return (
    // Form UI
    // ...
    <button onClick={saveFormData}>Submit</button>
  );
}