Reworking react

Author: grantnelson-wf

playground/internal/react/codeBox.go

@@ -6,24 +6,20 @@ import (
 	"github.com/gopherjs/gopherjs/js"
 )
 
-func CodeBox(code string, setCode func(string), onCodeChanged func()) *Element {
+func CodeBox(code string, setCode func(string)) *Element {
 	return CreateElement(codeBoxComponent, Props{
-		`code`:          code,
-		`setCode`:       setCode,
-		`onCodeChanged`: onCodeChanged,
+		`code`:    code,
+		`setCode`: setCode,
 	})
 }
 
 func codeBoxComponent(prop Props) *Element {
 	cba := &codeBoxAssistant{
-		code:          prop[`code`].(string),
-		setCode:       prop.AsFunc(`setCode`),
-		onCodeChanged: prop.AsFunc(`onCodeChanged`),
-		textAreaRef:   UseRef(),
+		code:        prop[`code`].(string),
+		setCode:     prop.AsFunc(`setCode`),
+		textAreaRef: UseRef(),
 	}
 
-	println("> code:", cba.code) // TODO(grantnelson-wf): REMOVE
-
 	return Div(Props{
 		`className`: `box`,
 		`id`:        `content`,
@@ -48,24 +44,18 @@ func codeBoxComponent(prop Props) *Element {
 }
 
 type codeBoxAssistant struct {
-	code          string
-	setCode       Func
-	onCodeChanged Func
-	textAreaRef   *Ref
+	code        string
+	setCode     Func
+	textAreaRef *Ref
 }
 
 func (cba *codeBoxAssistant) onInput(e *js.Object) {
-	if cba.onCodeChanged != nil {
-		cba.onCodeChanged()
-	}
+	cba.setCode(e.Get(`target`).Get(`value`).String())
 }
 
 func (cba *codeBoxAssistant) onKeyDown(e *js.Object) {
 	if cba.handleKeyDown(e.Get(`keyCode`).Int()) {
 		e.Call(`preventDefault`)
-		if cba.onCodeChanged != nil {
-			cba.onCodeChanged()
-		}
 	}
 }
 

playground/internal/react/playground.go

@@ -1,19 +1,21 @@
 package react
 
+import "fmt"
+
 func Playground() *Element {
 	return CreateElement(playgroundComponent, nil)
 }
 
 func playgroundComponent() *Element {
 	code, setCode := UseState("Hello World")
 
-	onCodeChanged := func() {
-		println("Code changed!") // TODO(grantnelson-wf): REMOVE
-	}
+	UseEffect(func() {
+		println(fmt.Sprintf(`Code: %q`, code))
+	}, code)
 
 	return Div(Props{
 		`id`: `playground`,
 	},
-		CodeBox(code, setCode, onCodeChanged),
+		CodeBox(code, setCode),
 	)
 }