Fix/writing markup with jsx

src/content/learn/referencing-values-with-refs.md

@@ -655,6 +655,39 @@ export default function Chat() {
 
 </Sandpack>
 
+If you don't need the input to be controlled (e.g., no live validation or display elsewhere), you can skip state entirely and read the DOM value directly via a ref.
+
+<Sandpack>
+
+```js
+import { useRef } from 'react';
+
+export default function Chat() {
+  const inputRef = useRef(null);
+
+  function handleSend() {
+    setTimeout(() => {
+      alert('Sending: ' + inputRef.current.value);
+    }, 3000);
+  }
+
+  return (
+    <>
+      <input
+        ref={inputRef}
+      />
+      <button
+        onClick={handleSend}>
+        Send
+      </button>
+    </>
+  );
+}
+```
+
+</Sandpack>
+
+
 </Solution>
 
 </Challenges>

src/content/learn/writing-markup-with-jsx.md

@@ -74,7 +74,7 @@ Suppose that you have some (perfectly valid) HTML:
   src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
   alt="Hedy Lamarr"
   class="photo"
->
+/>
 <ul>
     <li>Invent new traffic lights
     <li>Rehearse a movie scene
@@ -106,7 +106,7 @@ export default function TodoList() {
       src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
       alt="Hedy Lamarr"
       class="photo"
-    >
+    />
     <ul>
       <li>Invent new traffic lights
       <li>Rehearse a movie scene
@@ -145,7 +145,7 @@ For example, you can use a `<div>`:
     src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
     alt="Hedy Lamarr"
     class="photo"
-  >
+  />
   <ul>
     ...
   </ul>
@@ -162,7 +162,7 @@ If you don't want to add an extra `<div>` to your markup, you can write `<>` and
     src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
     alt="Hedy Lamarr"
     class="photo"
-  >
+  />
   <ul>
     ...
   </ul>