From 2624a3f84356aacf2bfbb9b921158413f32ffe02 Mon Sep 17 00:00:00 2001
From: lovasoa <pere.jobs@gmail.com>
Date: Sun, 9 Jul 2023 17:58:27 +0200
Subject: [PATCH] simplify the react integration example

---
 .../README.md                                                | 1 +
 .../my_react_component.js                                    | 4 ++--
 .../react.sql                                                | 5 ++---
 .../sqlpage/templates/react_component.handlebars             | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/examples/using react and other custom scripts and styles/README.md b/examples/using react and other custom scripts and styles/README.md
index fc05964d..cdc6fe39 100644
--- a/examples/using react and other custom scripts and styles/README.md	
+++ b/examples/using react and other custom scripts and styles/README.md	
@@ -1,6 +1,7 @@
 # Custom javascript and CSS
 
 This example shows how to use custom javascript and CSS in your application.
+It is compatible with SQLPage v0.7.3 and above.
 
 It integrates a simple [react](https://reactjs.org/) component and loads it with properties coming from a SQL query.
 
diff --git a/examples/using react and other custom scripts and styles/my_react_component.js b/examples/using react and other custom scripts and styles/my_react_component.js
index 998092a0..115603f3 100644
--- a/examples/using react and other custom scripts and styles/my_react_component.js	
+++ b/examples/using react and other custom scripts and styles/my_react_component.js	
@@ -1,7 +1,7 @@
 // Here we are using React and ReactDOM directly, but this file could be a compiled
 // version of a React component written in JSX.
 
-function RootComponent({ greeting_name }) {
+function MyComponent({ greeting_name }) {
     const [count, setCount] = React.useState(0);
     return React.createElement(
         'button',
@@ -13,5 +13,5 @@ function RootComponent({ greeting_name }) {
 for (const container of document.getElementsByClassName('react_component')) {
     const root = ReactDOM.createRoot(container);
     const props = JSON.parse(container.dataset.props);
-    root.render(React.createElement(RootComponent, props, null));
+    root.render(React.createElement(window[props.react_component_name], props, null));
 }
\ No newline at end of file
diff --git a/examples/using react and other custom scripts and styles/react.sql b/examples/using react and other custom scripts and styles/react.sql
index 79f48ce6..6e1da8ca 100644
--- a/examples/using react and other custom scripts and styles/react.sql	
+++ b/examples/using react and other custom scripts and styles/react.sql	
@@ -9,6 +9,5 @@ SELECT 'shell' AS component,
     'my_react_component.js' AS javascript;
 
 SELECT 'react_component' AS component,
-    JSON_OBJECT(
-        'greeting_name', 'World'
-    ) AS props;
\ No newline at end of file
+        'MyComponent' AS react_component_name,
+        'World' AS greeting_name;
\ No newline at end of file
diff --git a/examples/using react and other custom scripts and styles/sqlpage/templates/react_component.handlebars b/examples/using react and other custom scripts and styles/sqlpage/templates/react_component.handlebars
index d983aac5..6e510b75 100644
--- a/examples/using react and other custom scripts and styles/sqlpage/templates/react_component.handlebars	
+++ b/examples/using react and other custom scripts and styles/sqlpage/templates/react_component.handlebars	
@@ -1,3 +1,3 @@
-<div class="react_component" data-props="{{props}}">
+<div class="react_component" data-props="{{stringify this}}">
   Dynamic component is loading...
 </div>
\ No newline at end of file