docs: Fix basic form example

Author: tjtanjin

docs/examples/basic_form.md

@@ -11,8 +11,15 @@ The following example is a basic recruitment form for a pet store. Note that the
 
 ```jsx live noInline title=MyChatBot.js
 const MyChatBot = () => {
-	const [form, setForm] = React.useState({});
+	const formRef = React.useRef({});
+
+	// simple helper to update form
+	const updateForm = (patch) => {
+		Object.assign(formRef.current, patch);
+	};
+
 	const formStyle = {
+		color: "black",
 		marginTop: 10,
 		marginLeft: 20,
 		border: "1px solid #491d8d",
@@ -24,12 +31,12 @@ const MyChatBot = () => {
 	const flow={
 		start: {
 			message: "Hello there! What is your name?",
-			function: (params) => setForm({...form, name: params.userInput}),
+			function: (params) => updateForm({ name: params.userInput }),
 			path: "ask_age"
 		},
 		ask_age: {
 			message: (params) => `Nice to meet you ${params.userInput}, what is your age?`,
-			function: (params) => setForm({...form, age: params.userInput}),
+			function: (params) => updateForm({ age: params.userInput }),
 			path: "ask_pet"
 		},
 		ask_pet: {
@@ -39,7 +46,7 @@ const MyChatBot = () => {
 			// options: {items: ["Yes", "No"], sendOutput: false}
 			options: ["Yes", "No"],
 			chatDisabled: true,
-			function: (params) => setForm({...form, pet_ownership: params.userInput}),
+			function: (params) => updateForm({ pet_ownership: params.userInput }),
 			path: "ask_choice"
 		},
 		ask_choice: {
@@ -49,25 +56,28 @@ const MyChatBot = () => {
 			// checkboxes: ["Dog", "Cat", "Rabbit", "Hamster"]
 			checkboxes: {items: ["Dog", "Cat", "Rabbit", "Hamster"], min: 2},
 			chatDisabled: true,
-			function: (params) => setForm({...form, pet_choices: params.userInput}),
+			function: (params) => updateForm({ pet_choices: params.userInput }),
 			path: "ask_work_days"
 		},
 		ask_work_days: {
 			message: "How many days can you work per week?",
-			function: (params) => setForm({...form, num_work_days: params.userInput}),
+			function: (params) => updateForm({ num_work_days: params.userInput }),
 			path: "end"
 		},
 		end: {
 			message: "Thank you for your interest, we will get back to you shortly!",
-			component: (
+			component: () => {
+				const form = formRef.current;
+				return (
 				<div style={formStyle}>
 					<p>Name: {form.name}</p>
 					<p>Age: {form.age}</p>
 					<p>Pet Ownership: {form.pet_ownership}</p>
 					<p>Pet Choices: {form.pet_choices}</p>
 					<p>Num Work Days: {form.num_work_days}</p>
 				</div>
-			),
+				);
+			},
 			options: ["New Application"],
 			chatDisabled: true,
 			path: "start"