Chapter 10 - use client side components for state

app/like-button.js

@@ -0,0 +1,15 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function LikeButton() {
+
+    const [likes, setLikes] = useState(0);
+
+    function handleClick() {
+        setLikes(likes + 1);
+    }
+
+    return (<button onClick={handleClick}> Like ({likes}) </button>)
+
+}

app/page.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import LikeButton from './like-button';
 
 function Header({ title }) {
     return <h1>{title}</h1>
@@ -7,12 +7,6 @@ function Header({ title }) {
 export default function HomePage() {
     const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
-    const [likes, setLikes] = React.useState(0);
-
-    function handleClick() {
-        setLikes(likes + 1);
-    }
-
     return (
         <div>
             <Header title="Develop. Preview. Ship." />
@@ -21,7 +15,7 @@ export default function HomePage() {
                     <li key={name}> {name} </li>
                 ))}
             </ul>
-            <button onClick={handleClick}> Like ({likes}) </button>
+            <LikeButton />
         </div>
     )
 }