diff --git a/articles/hilla/guides/from-java-to-react.adoc b/articles/hilla/guides/from-java-to-react.adoc
index 23b3772f3f..74d173e29e 100644
--- a/articles/hilla/guides/from-java-to-react.adoc
+++ b/articles/hilla/guides/from-java-to-react.adoc
@@ -333,12 +333,27 @@ The `useNavigate` hook is used to navigate programmatically. It returns a functi
 .TSX
 [source,jsx]
 ----
-import { useNavigate } from 'react-router-dom';
+import { useSignal } from "@vaadin/hilla-react-signals";
+import { Button, NumberField } from "@vaadin/react-components";
+import { useNavigate } from "react-router";
 
-export default function HomeView() {
+export default function GameView() {
+    const secretNumber = 42;
     const navigate = useNavigate();
+    const id = useSignal('');
 
-    return <Button onClick={() => navigate('/user/123')}>Go to user 123</Button>;
+    function checkNumber() {
+        if (Number(id.value) === secretNumber) {
+            navigate('/win');
+        } else {
+            navigate('/lose');
+        }
+    }
+
+    return <>
+        <NumberField label="Guess the number" value={id.value} onValueChanged={(e) => id.value = e.detail.value} />
+        <Button onClick={checkNumber}>Check</Button>
+    </>;
 }
 ----