diff --git a/.version b/.version
index ae05c28ba..4cce89fde 100644
--- a/.version
+++ b/.version
@@ -1 +1 @@
-0.2.717
\ No newline at end of file
+0.2.719
\ No newline at end of file
diff --git a/docs/docs/03-syntax-and-usage/17-using-react-with-templ.md b/docs/docs/03-syntax-and-usage/17-using-react-with-templ.md
index 4ef3e7a0a..6b1d1a508 100644
--- a/docs/docs/03-syntax-and-usage/17-using-react-with-templ.md
+++ b/docs/docs/03-syntax-and-usage/17-using-react-with-templ.md
@@ -162,13 +162,9 @@ import { Header, Body, Hello } from './components';
// Previous script contents...
-export function renderHello(id: string, name: string) {
- const rootElement = document.getElementById(id);
- if (!rootElement) {
- throw new Error(`Could not find element with id ${id}`);
- }
- const reactRoot = createRoot(rootElement);
- reactRoot.render(Hello(name));
+export function renderHello(e: HTMLElement) {
+ const name = e.getAttribute('data-name') ?? "";
+ createRoot(e).render(Hello(name));
}
```
@@ -178,11 +174,11 @@ Now that we have a `renderHello` function that will render the React component t
In templ, we can add a `Hello` component that does two things:
-1. Renders an element for the React component to be loaded into.
-2. Renders the `renderHelloReact` script template, passing the server-side `id` and `name` fields to the script.
+1. Renders an element for the React component to be loaded into that sets the `data-name` attribute to the value of the server-side `name` field.
+2. Writes out JS that calls the `renderHello` function to mount the React component into the element.
:::note
-The template renders three copies of the `Hello` React component, passing in a distinct `id` and `name` parameter ("Alice", "Bob" and "Charlie").
+The template renders three copies of the `Hello` React component, passing in a distinct `name` parameter ("Alice", "Bob" and "Charlie").
:::
```templ title="components.templ"
@@ -190,14 +186,12 @@ package main
import "fmt"
-script renderHelloReact(id, name string) {
- // Use the renderHello function from the React bundle.
- bundle.renderHello(id, name)
-}
-
-templ Hello(id, name string) {
-
- @renderHelloReact(id, name)
+templ Hello(name string) {
+
+
+
}
templ page() {
@@ -216,8 +210,8 @@ templ page() {
- for i, name := range []string{"Alice", "Bob", "Charlie"} {
- @Hello(fmt.Sprintf("react-hello-%d", i), name)
+ for _, name := range []string{"Alice", "Bob", "Charlie"} {
+ @Hello(name)
}