From 25072921a74e88eb2fd9a6e365dcda6a058883a8 Mon Sep 17 00:00:00 2001
From: Geir Okkenhaug Jerstad <geir@geokkjer.eu>
Date: Thu, 19 Sep 2024 14:16:59 +0200
Subject: [PATCH] finished react tutorial

---
 react_test/tutorial/app/like-button.js | 11 +++++++++++
 react_test/tutorial/app/page.js        | 10 +++-------
 2 files changed, 14 insertions(+), 7 deletions(-)
 create mode 100644 react_test/tutorial/app/like-button.js

diff --git a/react_test/tutorial/app/like-button.js b/react_test/tutorial/app/like-button.js
new file mode 100644
index 0000000..a770e42
--- /dev/null
+++ b/react_test/tutorial/app/like-button.js
@@ -0,0 +1,11 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function LikeButton() {
+    const [likes, setLikes] = useState(0);
+    function handleClick(){
+        setLikes(likes + 1);
+    }
+    return <button onClick={handleClick}>Likes ({likes})</button>
+}
\ No newline at end of file
diff --git a/react_test/tutorial/app/page.js b/react_test/tutorial/app/page.js
index 0370333..0d2935c 100644
--- a/react_test/tutorial/app/page.js
+++ b/react_test/tutorial/app/page.js
@@ -1,5 +1,4 @@
-
-import { useState } from 'react';
+import LikeButton from "./like-button";
 
 function Header({ title }) {
   return <h1>{title ? title : 'Default Title'}</h1>;
@@ -7,11 +6,8 @@ function Header({ title }) {
 export default function HomePage() {
   const names = ['Ada Lovlace', 'Grace Hopper', 'Margaret Hamilton'];
 
-  const [likes, setLikes] = React.useState(0);
+  
 
-  function handleClick() {
-    setLikes(likes + 1);
-  }
   return (
     <div>
       <Header title="Develop. Preview. Ship." />
@@ -20,7 +16,7 @@ export default function HomePage() {
           <li key={name}>{name}</li>
         ))}
       </ul>
-      <button onClick={handleClick}>Likes ({likes})</button>
+      <LikeButton />
     </div>
   );
 }