Making react work

Author: grantnelson-wf

playground/internal/react/component.go

@@ -33,30 +33,3 @@ func (c *Component) GetState(key string) *js.Object {
 func (c *Component) SetState(newState State) {
 	c.Call("setState", newState)
 }
-
-//============================================
-
-func NewCounter(initName string, initAge int) *Element {
-	return NewComponent(Props{}, map[string]any{
-		`name`: initName,
-		`age`:  initAge,
-	}, func(c *Component) Node {
-		return Fragment(
-			CreateElement(`input`, Props{
-				`value`: c.GetState(`name`).String(),
-				`onChange`: func(e *js.Object) {
-					c.SetState(State{`name`: e.Get(`target`).Get(`value`).String()})
-				},
-			}),
-			CreateElement(`input`, Props{
-				`type`:  `button`,
-				`value`: `Increment age`,
-				`onClick`: func() {
-					c.SetState(State{`age`: c.GetState(`age`).Int() + 1})
-				},
-			}),
-			CreateElement(`p`, nil,
-				`Hello, `, c.GetState(`name`).String(), `. You are `, c.GetState(`age`).Int(), `.`),
-		)
-	})
-}

playground/internal/react/elements.go

@@ -1,11 +1,13 @@
 package react
 
+import "github.com/gopherjs/gopherjs/js"
+
+func StrictMode(children ...Node) *Element {
+	return CreateElement(react().Get(`StrictMode`), nil, children...)
+}
+
 func Fragment(children ...Node) *Element {
-	args := []any{react().Get(`Fragment`), nil}
-	for _, c := range children {
-		args = append(args, checkNode(c))
-	}
-	return &Element{Object: react().Call(`createElement`, args...)}
+	return CreateElement(react().Get(`Fragment`), nil, children...)
 }
 
 func Div(props Props, children ...Node) *Element {
@@ -16,9 +18,39 @@ func Span(props Props, children ...Node) *Element {
 	return CreateElement(`span`, props, children...)
 }
 
+func P(props Props, children ...Node) *Element {
+	return CreateElement(`p`, props, children...)
+}
+
 func Button(value string, props Props, onClick func()) *Element {
+	if props == nil {
+		props = Props{}
+	}
 	props[`value`] = value
 	props[`type`] = `button`
 	props[`onClick`] = onClick
 	return CreateElement(`input`, props)
 }
+
+//============================================
+
+func NewCounter(initName string, initAge int) *Element {
+	return NewComponent(Props{}, map[string]any{
+		`name`: initName,
+		`age`:  initAge,
+	}, func(c *Component) Node {
+		return StrictMode(
+			CreateElement(`input`, Props{
+				`value`: c.GetState(`name`).String(),
+				`onChange`: func(e *js.Object) {
+					c.SetState(State{`name`: e.Get(`target`).Get(`value`).String()})
+				},
+			}),
+			Button(`Increment age`, nil, func() {
+				c.SetState(State{`age`: c.GetState(`age`).Int() + 1})
+			}),
+			CreateElement(`p`, nil,
+				`Hello, `, c.GetState(`name`).String(), `. You are `, c.GetState(`age`).Int(), `.`),
+		)
+	})
+}

playground/internal/react/react.go

@@ -41,7 +41,7 @@ func (r *Root) Render(n Node) {
 	r.Call(`render`, checkNode(n))
 }
 
-func CreateElement(typ string, props Props, children ...Node) *Element {
+func CreateElement(typ any, props Props, children ...Node) *Element {
 	args := []any{typ, props}
 	for _, c := range children {
 		args = append(args, checkNode(c))