From bfcf4b941a6c20a1afe87e5ba9691bc746cac2bc Mon Sep 17 00:00:00 2001
From: Lennart Fleischmann <lennart.fleischmann@hanko.io>
Date: Thu, 15 Sep 2022 18:21:44 +0200
Subject: [PATCH] fix(examples): prevent default form submit when adding a todo

---
 examples/nextjs/pages/todo.tsx | 5 +++--
 examples/react/src/Todo.tsx    | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/examples/nextjs/pages/todo.tsx b/examples/nextjs/pages/todo.tsx
index 8e7bcb6c..9f8eb372 100644
--- a/examples/nextjs/pages/todo.tsx
+++ b/examples/nextjs/pages/todo.tsx
@@ -1,7 +1,7 @@
+import React, {useCallback, useEffect, useMemo, useState} from "react";
 import {NextPage} from "next";
 import {useRouter} from "next/router";
 import {TodoClient, TodoList} from "../util/TodoClient";
-import {useCallback, useEffect, useMemo, useState} from "react";
 import styles from "../styles/Todo.module.css";
 
 const api = process.env.NEXT_PUBLIC_BACKEND!;
@@ -14,7 +14,8 @@ const Todo: NextPage = () => {
   const [description, setDescription] = useState<string>("");
   const [error, setError] = useState<Error | null>(null);
 
-  const addTodo = () => {
+  const addTodo = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
     const entry = {description, checked: false};
 
     client.addTodo(entry).then((res) => {
diff --git a/examples/react/src/Todo.tsx b/examples/react/src/Todo.tsx
index c4b6e00c..4f0622f5 100644
--- a/examples/react/src/Todo.tsx
+++ b/examples/react/src/Todo.tsx
@@ -12,7 +12,8 @@ function Todo() {
   const [error, setError] = useState<Error | null>(null);
   const client = useMemo(() => new TodoClient(api), []);
 
-  const addTodo = () => {
+  const addTodo = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
     const entry = {description, checked: false};
 
     client.addTodo(entry).then((res) => {