From 2c40c6aa97e97fd71c933c8055b86f1f2ce15c7c Mon Sep 17 00:00:00 2001
From: Phil Nash <philnash@gmail.com>
Date: Wed, 4 Sep 2024 11:37:17 +0100
Subject: [PATCH] Updates example code for Next.js in docs

This is a bit picky, but when I copied the example page.tsx from https://firebase.google.com/docs/genkit/nextjs I found I had some linter errors in my editor.

I have updated the example code to:
* more closely match React style (varName and setVarName for useState)
* reflect good practices in forms (using htmlFor for labels)

I also added some spacing to the button, to make it easier to see.
---
 docs/nextjs.md | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/nextjs.md b/docs/nextjs.md
index 9547e6f4b6..5245838ec9 100644
--- a/docs/nextjs.md
+++ b/docs/nextjs.md
@@ -127,21 +127,23 @@ Node.js 20 or later.
         import { useState } from 'react';
 
         export default function Home() {
-          const [menuItem, setMenu] = useState<string>('');
+          const [menuItem, setMenuItem] = useState<string>('');
 
           async function getMenuItem(formData: FormData) {
             const theme = formData.get('theme')?.toString() ?? '';
             const suggestion = await callMenuSuggestionFlow(theme);
-            setMenu(suggestion);
+            setMenuItem(suggestion);
           }
 
           return (
             <main>
               <form action={getMenuItem}>
-                <label>
+                <label htmlFor="theme">
                   Suggest a menu item for a restaurant with this theme:{' '}
                 </label>
-                <input type="text" name="theme" />
+                <input type="text" name="theme" id="theme" />
+                <br />
+                <br />
                 <button type="submit">Generate</button>
               </form>
               <br />