From 7aac740a90ff3a2b2341baddb4b15dba8a5d89e7 Mon Sep 17 00:00:00 2001
From: billy rennekamp <billy.rennekamp@gmail.com>
Date: Tue, 18 Feb 2025 19:58:36 +0100
Subject: [PATCH] Update getting-started.md

tweaks to make copy paste work
---
 docs/developers/frames/v2/getting-started.md | 24 ++++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/docs/developers/frames/v2/getting-started.md b/docs/developers/frames/v2/getting-started.md
index e68e1fb3..8d1b0261 100644
--- a/docs/developers/frames/v2/getting-started.md
+++ b/docs/developers/frames/v2/getting-started.md
@@ -349,6 +349,8 @@ When your frame loads, the parent Farcaster app provides it with context informa
 We can access the context data at `sdk.context` to see information about the current user.:
 
 ```tsx
+'use client'
+
 import { useEffect, useCallback, useState } from 'react';
 import sdk, { type FrameContext } from '@farcaster/frame-sdk';
 
@@ -377,27 +379,14 @@ export default function Demo() {
 
       <div className="mb-4">
         <h2 className="font-2xl font-bold">Context</h2>
-        <button
-          onClick={toggleContext}
-          className="flex items-center gap-2 transition-colors"
-        >
-          <span
-            className={`transform transition-transform ${
-              isContextOpen ? 'rotate-90' : ''
-            }`}
-          >
-            ➤
-          </span>
-          Tap to expand
-        </button>
 
-        {isContextOpen && (
+        {
           <div className="p-4 mt-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
             <pre className="font-mono text-xs whitespace-pre-wrap break-words max-w-[260px] overflow-x-">
               {JSON.stringify(context, null, 2)}
             </pre>
           </div>
-        )}
+        }
       </div>
     </div>
   );
@@ -414,6 +403,11 @@ When you load this in the Warpcast frames playground, you should see your own Fa
 This is a lot of data, so let's hide it behind a simple toggle:
 
 ```tsx
+'use client'
+
+import { useEffect, useCallback, useState } from 'react';
+import sdk, { type FrameContext } from '@farcaster/frame-sdk';
+
 export default function Demo() {
   const [isSDKLoaded, setIsSDKLoaded] = useState(false);
   const [context, setContext] = useState<FrameContext>();